js的冒泡事件,前端冒泡事件的捕获,js之事件冒泡和事件捕获详细介绍

js的冒泡事件,前端冒泡事件的捕获,js之事件冒泡和事件捕获详细介绍

事件——如何使用事件,IE和DOM事件模型的主要区别是什么?有需要的朋友可以参考一下。

(1)气泡事件:按照从最具体的事件目标到最不具体的事件目标(文档对象)的顺序触发事件。

IE 5.5: div -主体-文档

IE 6.0: div - body - html - document

Mozilla 1.0:div-body-html-document-windows

(2)事件捕获:事件从最不准确的对象(文档对象)开始触发,然后到最准确的(也可以在窗口级别捕获事件,但必须由开发人员特别指定)。

(3)DOM事件流:同时支持两种事件模型:捕获事件和冒泡事件,但捕获事件先发生。两种事件流将触及DOM中的所有对象,以文档对象开始,以文档对象结束。

DOM模型最独特的属性是文本节点也会触发事件(不在IE中)。

支持W3C标准的浏览器在添加事件时使用addEventListener (Event,FN,useCapture)方法。基础中的第三个参数UseCapture是一个布尔值,用于设置是在事件被捕获时执行事件,还是在事件冒泡时执行事件。而与W3C不兼容的浏览器(IE)使用的是attachEvent()方法,没有相关设置。但是,当事件冒泡时,即当useCapture等于false时,默认执行IE的事件模型。因此,在处理事件时将useCapture设置为false更安全,也达到了兼容浏览器的效果。

事件捕获阶段:从顶层标签开始向下搜索事件,直到捕获到事件目标。事件冒泡阶段:事件从事件目标开始,冒泡到页面的顶部标签。

假设一个元素div,它有一个从属元素P,P element /p/div都与click事件绑定。如果用户单击P,它会触发div和P上的click事件。这两个事件处理程序中的哪一个会先执行?事件的顺序是什么?

两种模型

之前,网景和微软是不同的实现。

在Netscape中,首先触发div,这称为事件捕获。

在微软,p先触发,这叫事件冒泡。

这两个事件以相反的顺序处理。IE只支持事件冒泡,Mozilla、Opera 7和Konqueror支持,Opera的老版本和iCab不支持。

事件捕获

使用事件捕获时,父元素先触发,子元素后触发,即div先触发,p后触发。

事件冒泡

使用事件冒泡时,子元素先触发,父元素后触发,即P先触发,div后触发。

W3C模型

W3C模型中和了这两者。在W3C模型中,当任何事件发生时,从顶层捕获事件,直到事件触发器到达事件源元素。然后,事件从事件源冒泡,直到到达文档。

程序员可以选择在绑定事件时是使用事件捕获还是事件冒泡。方法是在绑定事件时使用addEventListener函数,它有三个参数。如果第三个参数为真,表示使用事件捕获;如果为false,则意味着使用事件冒泡。

ele.addEventListener(click ,doSomething2,true)

真=捕获

真=冒泡

传统绑定事件方式

在支持W3C DOM的浏览器中,像这样绑定事件的一般方式是事件冒泡的方式。

ele.onclick=doSomething2

IE浏览器

如上所述,IE只支持事件冒泡,不支持事件捕获,也不支持addEventListener函数。它不会使用第三个参数来指示它是冒泡还是捕获,但是它提供了另一个函数attachEvent。

ele.attachEvent(onclick ,do something 2);

附:事件冒泡:事件从目标(event.srcElement||event.target)开始,沿着文档逐层冒泡,直到文档。

事件的传播是可以阻止的:

在W3c中,使用stopPropagation()方法设置cancelBubble=true在IE下;在捕获过程中停止传播()。之后就不会发生后续的冒泡过程了~3。阻塞事件的默认行为,比如W3c中点击a ~后跳转,使用preventDefault()方法;在IE下设置window . event . return value=false;4.哇,终于完成了。测试时写的量,不是所有事件都能冒泡的,比如:模糊、聚焦、加载、卸载,(这个是摘自别人的文章,我没测试)。

js的冒泡事件,前端冒泡事件的捕获,js之事件冒泡和事件捕获详细介绍