IE和DOM事件流的区别

IE和DOM事件流的区别

··IE采用 冒泡型 事件模型··

 

冒泡型事件模型： span->div->body (IE事件流)

事件冒泡事件传递的一个过程，如果某一个父级元素具有了相同类型的事件，就会触发.

事件冒泡的执行顺序：从最特定的元素(触发的元素)冒泡的最不特定的元素(文档).

(事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签)

·事件冒泡：
1.当使用事件冒泡时,子级元素先触发,父级元素后触发(即box3先触发，box1后触发，由内向外)

 

2.只会在父子之间进行传递，不会在同级元素之间发生.

 

3.传播过程中不会因为某个父级元素没有相同类型的事件而终止.

 

·注意：不能触发冒泡的事件 blur、focus、load、unload

 

触发方式：默认执行事件冒泡,在ie中也只有事件冒泡,不支持addEventListener函数,所以不存在捕获事件,不会用第三个参数来表示是冒泡还是捕获.它提供了另一个函数attachEvent,如btn.attachEvent("onclick",fn);

 

设置addEventListener的第三个参数为false或不设置第三个参数(默认就为false)时，表示事件冒泡.如btn.addEventListener("click",fn,false);   若为true时，表示捕获.

 

··捕获型事件模型··

 

  捕获型事件模型：body->div->span (Netscape事件流)

事件捕获的执行顺序：从最不特定的元素(文档)触发到最特定的元素(触发的元素).

(事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target))

·事件捕获：
当你使用事件捕获时，父级元素先触发，子级元素后触发(即box1先触发，box3 后 触发,由外向内)

 

 

·注意：由于兼容性，IE低版本不存在捕获事件

 

 

··DOM使用 先捕获后冒泡型事件··

DOM事件模型： body->div->span->span->div->body (先捕获后冒泡)

 

DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象。

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

 

··【小拓展】：事件流所描述的就是从页面中接受事件的顺序。

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

DOM事件流分为三个阶段：

1事件捕获阶段  2处于目标阶段  3事件冒泡阶段

 

 

 

 

1》IE标准下注册多个事件监听器与移除监听器方法

IE浏览器中HTML元素有个attachEvent方法允许外界注册该元素多个事件监听器如element.attachEvent('onclick', fn);            

attachEvent接收两个参数  第一个参数是事件名称，第二个参数fn是回调函数(事件处理程序)。

移除先前注册的事件的监听器,调用element.detachEvent方法,参数不变

·注意：IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象

 

 2》DOM标准下注册多个事件监听器与移除监听器方法

通过元素的addEventListener方法注册，该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。如 element.addEventListener('click', fn, false/true);

addEventListener方法接收三个参数。第一个参数是事件名称，值得注意的是，这里事件名称与IE的不同，事件名称是没’on’开头的;第二个参数fn是回调处理函数;第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段(true)被调用还是冒泡阶段(flase)被调用

移除已注册的事件监听器调用element.removeEventListener方法,参数不变

 

阻止事件传播与事件传递后的默认事件

      阻止事件传播是指 停止捕获型事件或冒泡型事件的进一步传递。

  事件传递后的默认事件是指 通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。 如 表单中input type属性是“submit”，点击后在事件传播完浏览器就就自动提交表单。

 

 

1》在IE下只能阻止事件冒泡,通过设置event.cancelBubble为true

 

2》DOM标准通过调用e.stopPropagation()方法

2.1阻止事件传播(需要阻止哪一个传播就在哪一个添加)

当点击box3时不能触发box2,box1阻止了传播(不管是冒泡还是捕获都会阻止)

 

2.2阻止事件捕获

当点击box3时,由于事件是从外向里传递(即只能触发box1,阻止了向里传播)

 

 

 

1》在IE下,通过设置event.returnValue为false

2》DOM标准通过调用e.preventDefault()方法