事件 事件冒泡 事件捕获 怎么兼容事件addeventlistener attachEvent addEvent 兼容事件对象

最新推荐文章于 2024-02-17 12:37:41 发布
原创 最新推荐文章于 2024-02-17 12:37:41 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#事件冒泡 #javascript事件详解 #event.stoppropagatio

本文探讨了DOM事件处理中的兼容性问题，特别是针对IE浏览器的解决方案。介绍了addEvent和fixEvent函数的使用，并讨论了onload与DOMContentLoaded事件的区别及其对性能的影响。






addEvent()这个函数是要自己写的 上面的不怎么正确解决了兼容性问题。  一般用这个。如果要同时兼容IE就要。fixevent也是。


下面这个只要知道这个是个怎么回事就好了  太复杂了（没认真去看，以后有需要的时候看吧   总之 就是为了兼容IE浏览器 因为IE的event属性和其它有点不同）

如果能使用addeventlistener（）就说名event是标准化  算了  反正是为了兼容IE  和上面的addEvent（）多增加兼容event事件属性的兼容 








就直接换个事件咯  不用onload事件  直接改为DOMContentLoaded事件   这样可以提升性能

也就是如果使用onload就会出现必须页面全部加载完成才执行函数  例如一个图片很大 但是还在加载中  导致onload绑定的函数不能执行

但是如果使用的事件是DOMContentLoaded 就不会出现该问题   ，不会由于图片的原因阻塞   这是优化的一种。

21JavaScript 事件解绑全攻略！从基础到兼容，一文解锁跨浏览器操作密码
前端基地
06-11 926
还在为 JavaScript 事件解绑发愁？本文深度解析四大核心方法：基础的null赋值解绑、现代浏览器专属的removeEventListener、IE 旧版必备的detachEvent，更有跨浏览器兼容性封装方案！搭配实例与运行结果，助你轻松应对各类开发场景，告别事件绑定难题！
JavaScript实现为事件句柄绑定监听函数的方法分析
10-19
W3C推荐的`addEventListener`方法允许添加多个事件监听器，且支持事件捕获和冒泡阶段。每个监听函数都可以独立处理事件，`this`指向触发事件的元素。但遗憾的是，Internet Explorer（IE）早期版本不支持此方法。 3...
window.addeventjs事件驱动函数集合addEvent等
10-30
addEvent()、removeEvent()、handleEvent()、fixEvent()[
JavaScript 事件(捕获和冒泡 兼容性写法)
aaaa231555的博客
12-02 200
JavaScript 事件(捕获和冒泡 兼容性写法) 事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:onmo...
addEventListener
weixin_33898233的博客
11-13 1063
先看个例子： document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); 1 2 3 定义和用法 addEventListener() 方法用于向指定元素添加事...
JS中的事件绑定，事件捕获，事件冒泡以及事件委托
weixin_34161029的博客
09-02 175
● 事件分为三个阶段： 事件捕获 --> 事件目标 --> 事件冒泡 ●事件捕获：事件发生时（onclick,onmouseover……）首先发生在document上，然后依次传递给body、……最后到达目的节点（即事件目标）。 ●事件冒泡：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，跟事件捕...
JavaScript中绑定事件监听函数的通用方法 addEvent() [转]
leijuly'blog
03-08 1495
上篇文章讲到了事件绑定的3中常用方法：传统绑定、W3C绑定方法、IE绑定方法。但是，在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法，一下是比较知名的几种方法：在开始学期下面几种方法之前，应当讨论一下，一个好的addEvent()方法应当达到哪些要求：　　 a、支持同一元素的同一事件句柄可以绑定多个监听函数；　　 b、
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
12-01
如果支持，那么就使用`addEventListener`添加事件处理函数，参数包括事件类型（如`'click'`）、处理函数以及是否使用捕获阶段（通常为`false`，表示使用冒泡阶段）。对于不支持`addEventListener`的浏览器（主要是IE...
JS事件冒泡浏览器兼容
03-29
一种解决兼容性问题的方法是使用DOM2级事件接口，其中`addEventListener`和`removeEventListener`方法可以接受第三个参数，用来指定事件是在捕获阶段还是冒泡阶段处理。如果该参数为`true`，则事件处理函数会在捕获...
精选资源
javascript事件侦听器
01-08
这样，无论浏览器是否支持`addEventListener`，都可以使用`addEvent`函数来添加事件侦听器，而无需关心兼容性问题。 事件侦听器的应用场景广泛，包括但不限于用户交互响应、表单验证、动态内容更新等。通过正确地...
js中addEventListener()与removeEventListener()用法案例分析
11-21
本文实例讲述了js中addEventListener()与removeEventListener()用法。分享给大家供大家参考，具体如下： 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法，用于追加事件和删除追加。 接受参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 (3个) 最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false; 事件传递有两种方式：冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div>
addEvent
lzynihao的专栏
04-12 1172
对于IE的attachEvent方法可能大家都比较熟，现在说说FireFox的addEventListener的用法。 addEventListener的参数一共有三个，语法为： element.addEventListener(type,listener,useCapture) 下面是详解 其中element是要绑定函数的对象。type是事件名称，要注意的是"onclic
兼容性事件监听完美封装addEvent
weixin_42498482的博客
08-28 217
定义： /** * element 要绑定事件的对象，及HTML节点。 * type 事件名称，attachEvent监听的事件前边的加上“on”，比如“onclick”和“onmouseover”，addEventListener与之相反。 * listener 要绑定的事件监听函数 */ const addEvent = function({element, type, callback}) { if (element.ad
addEvent函数
weixin_34037515的博客
05-12 374
【本文主要是借addEvent函数说明call，apply和Array.prototype.slice.call的用法】 首先看最普通写法： var addEvent = function(obj,eventType,fn){ if(obj.addEventListener){ obj.addEventListener(eventType,fn,false...
attachEvent与addEventListener区别
YIDAY的专栏
12-15 1123
target.addEventListener(type, listener, useCapture);target 文档节点、document、window 或 XMLHttpRequest。type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。listener 实现了 EventListener 接口或者是 JavaScript
js addeventlistener
最新发布
Charles1938229的博客
02-17 6017
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
addEventListener 的事件冒泡
weixin_34144848的博客
04-09 257
语法 target.addEventListener(type, listener, useCapture); target 文档节点、document、window 或 XMLHttpRequest。 type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 listener 实现了 EventListener 接口或...
addevent()实现跨浏览器绑定事件
xiaoLeemm的博客
09-04 2345
绑定事件一般有三种方式：传统绑定事件，IE绑定事件，W3C绑定事件。传统绑定存在可读性问题，this问题，覆盖问题。为实现跨浏览器绑定事件，我们采用自定义方法addEvent().代码如下： //跨浏览器兼容添加事件监听 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,f
addEventListener 的三个参数
weixin_33895657的博客
03-16 778
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值