[js]如何在js方法中传递事件对象并且在各个浏览器之间兼容

【前端硬核】JS 事件机制全攻略:从事件对象到委托,附兼容实战! 想搞懂 JS 事件底层逻辑?这篇笔记带你击穿核心!涵盖事件对象兼容获取(解决 IE 与现代浏览器差异)、三阶段传播机制(捕获 / 冒泡顺序 + 代码演示)、事件委托性能优化(5 万条数据绑定难题秒解)。附完整代码 + 坐标属性对比表,新手也能轻松掌握事件驱动开发! 阅读详情

主要将事件对象放入第一个参数...


html中代码:

<img onmouseover="funX(event,'${pageContext.request.contextPath}/fileStore/${account.accountPicture}')" 
     onmouseout="funH()"  
     height="20px" src="${pageContext.request.contextPath}/fileStore/${account.accountPicture}">


js中代码:

function funX(event,img){
	var e = window.event || arguments[0];
	//alert(e.type);  
    //target = e.srcElement || e.target;  
	//alert(target.tagName);
	var divImg = $("#div_img").get(0);
	divImg.style.display="";
 	divImg.style.left=event.clientX+10;
 	divImg.style.top=event.clientY;
 	$("#div_img img").get(0).src=img;
}
function funH()
{$("#div_img").get(0).style.display='none';}



event 对象兼容火狐、谷歌、ie浏览器问题 项目中遇到这样一个业务需求:给动态生成的页面元素(input、div、checkbox等)添加事件,业务实现的难点在于:动态生成的页面元素的id、name都是按一定规则赋值的(例如:input1、input2..),那么给这些元素添加事件需要获取到动态生成元素的id或name属性值,根据属性值取到元素对象然后添加事件。 经过以上分析不难看出:难点就在于取得... 阅读详情

相关推荐

论文解析-sciPENN

用这2个CITE-seq共有的protein作为训练集,分别将他们特有的protein作为测试集,评估sciPENN对CITE-seq数据集中缺失的protein丰度预测准确度。来自Seurat 4 的PBMC数据集,样本被注射水疱性口炎病毒 (VSV) 载体 HIV 疫苗,数据集包含每个样本注射疫苗0天、3天、7天的CITE-seq数据。PBMCs作为训练集,MALT作为测试集,利用scRNA-seq测试17个蛋白质表达水平。Monocyte:随机取4个样本作为训练集,剩余4个样本作为测试集。

weixin_46065198的博客 1022

AM62L CBASS防火墙配置实战:从原理到代码实现

在嵌入式系统开发中,硬件安全是保障系统稳定与可靠的第一道防线。内存保护单元(MPU)和硬件防火墙(Firewall)作为硬件级安全机制,通过在总线层面进行物理拦截,为系统提供了最底层的安全保障。其核心原理是基于区域保护模型,通过配置地址寄存器划定保护范围,并利用权限寄存器精细控制不同安全状态和特权等级下的访问权限。这种技术对于实现系统隔离、防止恶意代码篡改关键数据、以及满足功能安全标准(如ISO 26262)具有重要价值,广泛应用于汽车电子、工业控制和物联网等高可靠性场景。本文以德州仪器AM62L处理器的C

weixin_33709219的博客 677

安装部署 Guacamole 远程桌面网关

Guacamole 是Apache基金会提供的一组基于web的远程桌面访问工具,支持 VNC、RDP、SSH、 Telnet 等协议,支持远程透传音视频。

UsamaBinLaden6976498的专栏 1963

JavaScript事件的绑定与传播

(一)JavaScript事件的绑定 使用对象, 事件 =函数形式绑定事件 它只能同时为同一个元素绑定同一个事件一次 不能绑定多次,如果绑定多次,后面的会覆盖掉前面的 1.addEventListener() 通过这个方法也可以为元素绑定响应函数 参数: 1.事件的字符串,不加on 2.回调函数,当事件触发时该函数会被调用 3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false 使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数 这样当...

m0_55132979的博客 288

从SGX到TDX:英特尔机密计算的技术演进与选型指南

本文深入解析了英特尔两代机密计算技术SGX与TDX的核心差异与选型策略。SGX提供应用级飞地隔离,安全等级高但开发复杂;TDX提供虚拟机级信任域保护,兼容性好且易于部署。文章结合金融与医疗行业实战案例,为开发者提供了清晰的选型指南,帮助根据代码可改性、安全需求、部署规模及生态成本选择最合适的机密计算方案。

java5的博客 420

rv1126 读取sensor输入,输出到屏幕显示【RK_MPI API接口】

rv1126 libdrm VO

学习记录 1万+

js 方法中传入事件对象的同时,传入其它参数

如,div双击事件 <div @dblclick="test($event,param)"></div> 在js方法中 test(e,param){}

weixin_40841731的博客 1647

文献综述三大痛点用AI轻松解决!借助Gemini 3 Pro搞定检索难、阅读慢、框架乱问题(附 AI 提示词)

4)“漏斗式”结构:先介绍宏观领域的研究现状,再缩小范围,聚焦于与你课题直接先关的子领域,深入探讨与你研究变量直接相关的文献, 指出前人没做过、没做全或结论有矛盾的地方,再顺势提出你的研究课题,这种结构逻辑最清晰,能直接引导读者发现你研究的必要性。想要有针对性的搜到相关文献,必须先把模糊的研究题目拆解成精准的检索语言,这个时候就需要建立一个关键词矩阵,如核心词、同义词、学术术语、上下位词,以及对应的英文表达。请围绕【我的研究主题/关键词】,检索近5年发表的高被引的中英文文献,优先选择顶刊综述/论文。

智能AI让学术科研更容易 277

javascript 兼容各个浏览器的事件

调用事件: //事件对象//什么是事件对象?在触发dom上的事件是都会产生一个事件对象event。例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的//dom 事件对象 type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为//...

weixin_34192993的博客 196

【知识图谱】实践篇——基于知识图谱的《红楼梦》人物关系可视化及问答系统实践:part1项目介绍与环境准备

看到这篇文章的你,相信对知识图谱相关概念不在陌生。知识图谱相关内容在实际开发中包含两个部分:1.知识图谱构建,2.知识图谱使用。知识图谱构建过程中涉及内容、技术都比较多。知识图谱的应用也逐渐在我们的生活中随处可见,其中基于知识图谱的问答系统就是其中的一个应用。基于知识图谱的问答系统称做KGQA(knowledge graph question answer),也有人称其为KBQA(knowledge based question answ).基于知识图谱的问答系统通常是使用的是领域知识图谱。下面就结合Git

让算法融入生活,改变生活! 4718

LangChain面试内容整理-知识点27:LangChain性能调优

LLM应用可能面临响应慢、成本高等性能问题。LangChain提供了一些优化方法和经验来提升性能和效率。

不务正业的猿 327

javascript onclick事件中传递对象参数和JavaScript中对象字符串转换

支持原创,原文链接 http://blog.youkuaiyun.com/legend11/article/details/53408459 http://blog.youkuaiyun.com/starrexstar/article/details/8083259/ var user = {id:1, name:'zs', age:20}; var ele = '修改';

chmod_R_755的专栏 9159

C#项目实战——【实例】企业人事管理系统(二):4、数据库与数据表设计;5、创建项目;

(1)展开新建的db_PWMS数据库节点,选中“表”节点,单击鼠标右键,在弹出的快捷菜单中选择“新建表”命令,如下图:(2)在SQL Server 2008管理器的右边显示一个新表,这里输入要创建的表中所需要的字段,并设置主键,如下图:(3)单击“保存”按钮,弹出“选择名称”对话框,如下图,输入要新建的表名“tb_Login”,单击“确定”按钮,即可在数据库中添加一个表。

做有价值的事,积累有价值的笔记! 1621

JavaScript事件(event)对象方法与属性

/ 创建自定义事件});// 监听自定义事件console.log('自定义事件触发,时间:', e.detail.time);});// 触发事件。

Made In SQL 1393

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

javascript事件对象参数兼容各浏览器写法

javascript事件对象参数兼容各浏览器写法: 通常调用事件处理程序时候,会将事件对象作为一个参数传递,事件对象的属性包含有当前事件的详细信息。 由于不同浏览器对于事件对象参数的传递不同,在实际应用中可能会带来不少的麻烦,当然有经验的编程人员能够编写出兼容性良好的代码,但是对于初次接触到类似问题的编程人员可能导致不少的麻烦,下面就通过实例简单介绍一下如何兼容各主流浏览器的事件处对象传递方式。 一.通过属性注册事件处理函数: 可以使用属性方式注册事件处理函数,例如下面这种形式: mydiv.onclick

时光留不住,毕竟东流去 419

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

【Web APIs】JavaScript 事件高级 ④ ( 事件对象 | 事件对象兼容性处理 )

一、JavaScript 事件对象 1、事件对象 2、事件对象兼容性处理 二、代码示例 1、代码示例 - 事件对象 ① 代码示例 ② 执行结果

让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 ) 1111

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

JavaScript 事件对象(Event)

在 JavaScript 里,当事件(像点击、键盘输入等)触发时,浏览器会自动生成一个事件对象。此对象包含了与该事件相关的各种信息,借助它,你可以深入了解事件发生的具体情况并进行相应处理。

moment159的博客 1042

html事件驱动,js事件驱动机制 浏览器兼容处理方法

3.1. 事件是如何产生的 *第一种情况,用户对网页做了某些操作,比如,点击了一个按钮,产生点击事件。 第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件。当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码。如果有,则调用该代码来处理。如果没有,会继续向上查找父节点,有没有对应的事件处理代码(事件冒泡)。3.2. 绑订事件处理...

weixin_35655990的博客 232

JavaScript dom事件 事件传递 事件冒泡 事件方法

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。HTML 事件可以是浏览器行为,也可以是用户行为。。

zdn135860_的博客 575

js解决事件对象兼容性问题

事件对象 -当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数 当事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标,键盘哪个按键被按下,鼠标滚轮滚动的方向等等, -如onmousemove, 该事件将会在鼠标在元素移动时被触发 见如下代码: div.onmousemove = function (e) { console.log(e); ...

LiLi_code的博客 439

html调用js中对象参数传递,js中获取事件对象的方法小结

var evt = window.event || arguments[0];下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式。1,第一种添加事件的方式,直接在html的属性中写JS代码Div1 Element大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事件对象...

weixin_34805367的博客 576

阻止事件冒泡和默认到事件对象在不同浏览器中的传递

今天群里有一个同学发了一个问题,问题起因是他定义了一个drag函数,然后函数内部使用了e进行组织默认实践,结果在360浏览器正常运行但是火狐却报错,e不存在,第一时间有点懵,组织冒泡和组织默认一般都用,那里需要那里用,一般不会出现这种问题。因为新手才有这种操作,但是引发我兴趣,经过一番测试,我发现在360里面时间默认进行了传递,所以在360可以正常运行,但是在火狐里面没有进行传递。然后我...

Usux0025的博客 210

js中事件对象、事件源对象、事件流理解

文章目录js中事件对象、事件源对象、事件流分析理解事件对象(event)事件源对象事件流捕获事件冒泡事件事件委托 js中事件对象、事件源对象、事件流分析理解 事件对象(event) 什么是事件:事件就是指js中所有可以发生的有并且有监听的事件,比如:(鼠标、键盘以及浏览器窗口变化等) 是什么是事件对象(event):通俗讲就是一个记录了事件各种信息的一个对象。 这里需要注意的是:事件对象会有兼容性问题,在除IE的浏览器中为event,而非浏览器中为window.event, btn.onclick =

sinat_40105935的博客 1200

在字符串拼接时向click事件传递一个对象的方法

场景 在进行js字符串拼接的时候有时候会遇到需要在一段字符串的onclick事件中传递的参数是一个对象的问题,传递之后我们会发现并不是我们想要的结果(主要是不想一个参数一个参数的去写,有时候参数太多就会显得太过臃肿)。 举例 如下: <span onclick="f1([object Object])">点我</span> 可以看到f1()方法内的参数变成了[object Object],这样的参数我们是没办法通过 xx.xx 这种格式进行数据操作的,有一种比较简单粗暴的方式是通过

m0_47587616的博客 1559

JavaScript核心之事件详解(EventTarget接口,js事件传播,Event对象)

目录 1 EventTarget接口 1.1 addEventListener() 1.1.1 addEventListenerthis对象的指向 1.2 removeEventListener() 1.3 dispatchEvent() 2 监听函数 2.1 HTML标签的on-属性 2.2 Element节点的事件属性 2.3addEventListener方法 3 事件...

上善若泪 5099

JavaScript浏览器事件对象

浏览器对象模型(BOM): 1、 宿主对象 2、 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关 3、 将浏览器中的各个部分转换成一个一个的对象,我们通过修改这些对象的属性,调用他们的方法,从而控制浏览器的各种行为 简单来说:BOM可以使我们通过JS来操作浏览器,在BOM中提供了一组对象,用于完成对浏览器的操作 (这些BOM对象在浏览器中都是作为window对象的属性保存,可通过window对象来使用,也可以直接使用) 1、 window对象:代表整个浏览器窗口、同时window也是网页中

weixin_46402513的博客 486
上一篇: [j2ee][servlet]使用get方法提交form表单时出现乱码解决方法
下一篇: [javase][json]fastJson在java后台转换json格式数据探究--处理数组/List/Map
wendellup
博客等级 码龄16年 54粉丝 49原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值