事件——如何使用事件,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)开始,沿着文档逐层冒泡,直到文档。