Skip to main content

DOM 事件

捕获事件、目标事件、冒泡事件

冒泡与捕获

事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素

addEventListener 的第三个参数

DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段,而作为开发者,我们可以选择事件处理函数在哪一个阶段被调用。 addEventListener方法用来为一个特定的元素绑定一个事件处理函数,是JavaScript中的常用方法。addEventListener有三个参数:

element.addEventListener(event, function, useCapture)

参数

  • event
    • 必须。字符串,指定事件名。
    • 注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
    • 提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。
  • function
    • 必须。指定要事件触发时执行的函数。
    • 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
  • useCapture
    • 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
    • 可能值:
      • true - 事件句柄在捕获阶段执行(即在事件捕获阶段调用处理函数)
      • false- false- 默认。事件句柄在冒泡阶段执行(即表示在事件冒泡的阶段调用事件处理函数)
window.onload = function(){
var oDiv = document.querySelector('.content');

var oBox = document.querySelector('.box');
/**
* 监听对应事件,并且可以添加对应配置
*
* type 事件类型
* listener ,执行事件后对应的回调函数
* useCaputre 设置是否进行捕获
*/
// target.addEventListener(type, listener ,{capture: Boolean, bubbling: Boolean, once: Boolean});
oDiv.addEventListener('click',function(e){
console.log(e.target);
})
// 事件触发顺序依次是捕获阶段,目标事件,冒泡事件
oBox.addEventListener('click',function(e){
console.log(e.currentTarget);
},false)
oBox.addEventListener('click',function(e){
console.log(e.currentTarget);
},true)
}

事件代理

在实际的开发当中,利用事件流的特性,我们可以使用一种叫做事件代理的方法。

<ul class="color_list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>purple</li>
</ul>
<div class="box"></div>
.color_list{
display: flex;
display: -webkit-flex;
}
.color_list li {
width: 100px;
height: 100px;
list-style: none;
text-align: center;
line-height: 100px;
}
// 每个li加上对应的颜色,此处省略
.box{
width: 600px;
height: 150px;
background-color: #cccccc;
line-height: 150px;
text-align: center;
}

我们想要在点击每个 li 标签时,输出li当中的颜色(innerHTML) 。常规做法是遍历每个 li ,然后在每个 li 上绑定一个点击事件: var color_list=document.querySelector(".color_list"); var colors=color_list.getElementsByTagName("li"); var box=document.querySelector(".box"); for(var n=0;n<colors.length;n++){ colors[n].addEventListener("click",function(){ console.log(this.innerHTML) box.innerHTML="该颜色为 "+this.innerHTML; }) }复制代码 这种做法在 li 较少的时候可以使用,但如果有一万个 li ,那就会导致性能降低(少了遍历所有 li 节点的操作,性能上肯定更加优化)。 这时就需要事件代理出场了,利用事件流的特性,我们只绑定一个事件处理函数也可以完成:

function colorChange(e){ var e=e||window.event;//兼容性的处理 if(e.target.nodeName.toLowerCase()==="li"){ box.innerHTML="该颜色为 "+e.target.innerHTML; } } color_list.addEventListener("click",colorChange,false)复制代码 由于事件冒泡机制,点击了 li 后会冒泡到 ul ,此时就会触发绑定在 ul 上的点击事件,再利用 target 找到事件实际发生的元素,就可以达到预期的效果。

使用事件代理的好处不仅在于将多个事件处理函数减为一个,而且对于不同的元素可以有不同的处理方法。假如上述列表元素当中添加了其他的元素节点(如:a、span等),我们不必再一次循环给每一个元素绑定事件,直接修改事件代理的事件处理函数即可。

(1)toLowerCase() 方法用于把字符串转换为小写。语法:stringObject.toLowerCase() 返回值:一个新的字符串,在其中 stringObject 的所有大写字符全部被转换为了小写字符。 (2)nodeName 属性指定节点的节点名称。如果节点是元素节点,则 nodeName 属性返回标签名。如果节点是属性节点,则 nodeName 属性返回属性的名称。对于其他节点类型,nodeName 属性返回不同节点类型的不同名称。 所有主流浏览器均支持 nodeName 属性。

冒泡还是捕获? 对于事件代理来说,在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分,但是由于事件冒泡的事件流模型被所有主流的浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型。 IE浏览器兼容 IE浏览器对addEventListener兼容性并不算太好,只有IE9以上可以使用。

要兼容旧版本的IE浏览器,可以使用IE的attachEvent函数 object.attachEvent(event, function) 两个参数与addEventListener相似,分别是事件和处理函数,默认是事件冒泡阶段调用处理函数,要注意的是,写事件名时候要加上"on"前缀("onload"、"onclick"等)。 阻止事件冒泡

  1. 给子级加 event.stopPropagation( ) $("#div1").mousedown(function(e){ var e=event||window.event; event.stopPropagation(); });复制代码

  2. 在事件处理函数中返回 false $("#div1").mousedown(function(event){ var e=e||window.event; return false; });复制代码 但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身(默认事件)。event.stopPropagation()则只阻止事件往上冒泡,不阻止事件本身。

  3. event.target==event.currentTarget,让触发事件的元素等于绑定事件的元素,也可以阻止事件冒泡;

阻止默认事件 (1)event.preventDefault( ) (2)return false

参考

事件类型

事件处理方法

自定义事件

事件组合

页面事件
焦点事件
键盘事件
鼠标事件
表单事件

window body frame 事件
docuemnt 事件
event 对象