事件模型--冒泡与捕获

秒速五厘米 2022-06-10 00:18 229阅读 0赞

Traditional Module（传统方式的事件模型）  
直接在DOM元素上绑定事件处理器

window.onload=function(){ …}
    obj.onmouseover=function(e){ …}
    obj.onclick=function(){ …}

**优点：**无论在IE还是Firefox等其他浏览器上都可以成功运行的通用方式，在Event处理函数内部的this变量无一例外的都只想被绑定的DOM元素，这使得Js程序员可以大大利用this关键字做很多事情

**缺点：**传统方式只支持Bubbling，而不支持Capturing，并且一次只能绑定一个事件处理器在DOM元素上，无法实现多Handler绑定，function参数中的event参数只对非IE浏览器有效果(因为IE浏览器有特制的window.event)。

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

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

**事件的冒泡和捕获**  
概念：  
冒泡，主要的特点是事件触发是由内向外的；  
捕获，主要的特点是事件触发是有外向内的；

例子：

如果div 和p标签都添加了事件处理，那么在冒泡事件就是当点击了p标签时，p标签绑定的事件会先触发，接着再向上冒泡触发div的事件（冒泡事件主要是IE的事件处理方式，而w3c对事件冒泡和捕获都支持）。捕获事件就是当点击p标签之后，div的事件会先触发，在触发p标签的事件。

**注：**由于IE群体用户比较广泛，在开发中为了兼容，一般都使用冒泡事件。

**事件绑定：**  
w3c标准的事件绑定是使用addEventListener,

addEventListener(‘click’,function,true)带有三个参数，第一个参数是事件类型，就是我们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，可以直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。  
Capturing即事件触发类型，布尔值，true为捕获模式，false为冒泡模式。  
在w3c标准中，可以使用this指向当前绑定事件的元素，拿到当前元素对象

--------------------

但是IE不支持addEventListener，IE使用的是attachEvent。

ele.attachEvent(“onclick”, doSomething2);  
支持两个参数，第一个参数是事件类型，要在事件类型前加on,第二个参数是事件触发时要执行的方法。该方法没有第三个参数，因为IE只是支持冒泡事件，而且不能使用this指向当前绑定事件的元素，只能使用window.event拿到元素对象

--------------------

**两个必须知道的IE和W3C标准的区别用法**

*阻止浏览器某DOM元素的默认行为*

W3C下调用e.preventDefault()  
IE下使用window.event.returnValue＝false

*阻止事件冒泡*  
W3C下调用调用e.stopPropagation()  
IE下设置window.event.cancelBubble=true