事件冒泡与事件捕获

最新推荐文章于 2025-04-08 20:04:38 发布

原创最新推荐文章于 2025-04-08 20:04:38 发布 · 447 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

本文解析了事件流中的事件冒泡和事件捕获两种机制，并通过实例展示了这两种机制的区别及其在实际开发中的应用。

导语：当浏览器发展到第四代时（IE4和Netscape Communicator4）,浏览器开发团队遇到了一个很有趣的问题：页面的哪一部分会拥有某个特定的事件？要明白这个问题问的是什么，可以想象画在同一张纸上的一组同心圆。如果你把手指放在圆心上，那么你手指指向的不是一个圆。两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。换句话说，在单击按钮的同事，你也单击了按钮的容器元素，甚至也单击了整个页面。
问题引入：事件流描述的是页面中接收事件的顺序。但是有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流。

1.概念

以下面的HTML页面作为实例:

<!DOCTYPE html>
<html>
<head>
    <title>Event Bubbling and Event Capturing</title>
</head>
<body>
    <div id="muDiv">Click Me</div>
</body>
</html>

1.1事件冒泡（event bubbling）：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）开始，然后逐级向上传播到较为不具体的元素（文档）。

如果你点击了页面中的div元素，那么这个click事件会按照如下顺序传播：
<div>-><body>-><html>->document
也就是说，点击事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后，click事件沿DOM树逐层向上传播，在每一级节点上都会发生，直到传播到document对象。

1.2事件捕获：不太具体的元素更早接收到事件，而最具体的元素最后接收到事件。

如果你点击div元素，会以下列顺序触发click事件：
document-><html>-><body>-><div>
也就是说，document对象首先接收到click事件，然后事件沿DOM树依次向下，直到传播到事件的实际目标，及<div>元素。
由于一些老版本浏览器的不支持，因此很少有人用事件捕获。建议大家用事件冒泡，特殊需要的话用事件捕获。

2.事件的绑定

addEventListener()方法为对象绑定事件：它接收三个参数（要处理的事件名，作为事件处理程序的函数，一个布尔值）。如果最后这个布尔值的值为true时，表示在捕获阶段调用事件处理程序；如果为false，表示在冒泡阶段调用事件处理程序。默认为false。
HTML结构如下：

<div id="parent">
        <p id="child">点击此处有彩蛋</p>
</div>

2.1事件冒泡：

Js代码：

       document.getElementById('parent').addEventListener("click",function () {
                alert("parent事件被触发，"+this.id);
            });
       document.getElementById('child').addEventListener("click",function () {
                alert("child事件被触发，"+this.id);
            });

执行结果：

child事件被触发，child
parent事件被触发，parent

解释：第三个参数没写，默认为false，在捕获阶段调用函数，id为child的元素先接收到该事件，再沿DOM树向上冒泡，id为parent的元素也接收到该事件，所以先输出child的，再输出parent的。

2.2事件捕获：

Js代码：

document.getElementById('parent').addEventListener("click",function () {
                alert("parent事件被触发，"+this.id);
            },true);
document.getElementById('child').addEventListener("click",function () {
                alert("child事件被触发，"+this.id);
            },true);

执行结果：

parent事件被触发，parent
child事件被触发，child

解释：第三个参数为true，表示在事件捕获阶段执行该函数。id为parent的元素先接受到这个事件，然后沿DOM树依次向下，id为child的元素再接受到该事件。

注意： IE浏览器不支持事件捕获，只支持事件冒泡，也没有addEventListener()方法，他提供了另一个方法，attachEvent(),接收两个参数，一个是事件名称（名称前要加on），另一个是事件处理函数。通过attachEvent()方法添加的事件处理程序都会被添加到冒泡阶段。
附： addEventListener()方法为绑定事件，对应的删除事件为removeEventListener()。通过前者添加的事件只能通过后者来删除，删数时传入的参数与添加时的参数一样，也就是说，通过addEventListener()添加的匿名函数无法移除！整一段代码看看：

var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
    alert(this.id);
});   /*b绑定了一个click事件*/

btn.removeEventListener("clcik",function(){
    alert(this.id);
});   /*移除这个事件，然而移除不了。。。*/

虽然看起来和绑定时候的参数一样，但是第二个参数与传入addEventListener()的是完全不同的函数！所以给函数起个名字吧，没有名字怪可怜的…

var btn=document.getElementById("btn");
function aaa(){
    alert(this.id);
}
btn.addEventListener("click",aaa);
btn.removeEventListener("click",aaa);

这样不就万事大吉了？！！

3.应用

<ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
     <li>item4</li>
     <li>item5</li>
     <li>item6</li>
</ul>

要求：鼠标放到li上对应的li背景变灰

3.1利用事件捕获实现：

$("ul").on("mouseover",function(e){
    $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
});

代码解释：给ul绑定onmouseover事件（注意：当用jQuery中的on方法时，事件名称前面不加on，js中的addEventListener方法中的第一个参数方法名也不加on），传入一个事件的参数e，e.target指的就是这个事件的目标元素，也就是li（会在下文中详细解释），把目标元素调用css方法，改变其背景颜色，将它的兄弟节点的背景颜色改为白色。这样就实现了鼠标放在哪个li上面哪个li的颜色变为灰色。
为何说使用时间冒泡实现的呢？是因为我们在ul上面绑定了事件，当我们鼠标放在ul的子对象也就是li上面的时候，会由该元素向上冒泡到ul，执行ul的事件绑定函数。当用语句$("<li>item7</li>").appendTo("ul"); 向ul动态添加一个li元素，鼠标放在该元素上面，没有函数可执行，然后沿DOM树向上冒泡，找到ul，执行ul绑定的事件的函数。

3.2利用普通方法实现：

$("li").on("mouseover",function(e){
    $(this).css("background-color","#ddd").siblings().css("background-color","white");
});

代码解释：直接获取到li元素，给每个li元素都绑定了这样的一个事件，当你动态添加一个li节点时，由于并没有给这个绑定事件，所以不会有效果。因为js代码从上到下执行，执行到绑定事件那块，就给这个页面现有的li绑定了这个事件，而新增加的节点的代码还没有加载进来，所以这个li不会绑定事件，只是添加进来一个节点而已…

4.e.target、e.currentTarget 和this

直接上代码，简单粗暴（自动脑补一个斜眼笑的表情）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width:200px;
            height:100px;
            background-color: lightsalmon;
        }
        #child{
            width:100px;
            height:50px;
            background-color: powderblue;
        }
    </style>
</head>
<body>
    <div id="parent" onclick="getEventTrigger(event)">
        <div id="child" onclick="getEventTrigger(event)">来点我呀？！</div>
    </div>
    <script>
        function getEventTrigger(e) {
            var x=e.currentTarget;
            var y=e.target;
            alert("currentTarget指向："+x.id+"        target指向："+y.id);
        }
    </script>
</body>
</html>

运行结果：
1.点击parent：

解释：由于默认为事件冒泡，所以点击parent，先触发id为parent的这个元素的事件，它的currentTarget就是当前的这个节点，它的target也是当前的这个节点。
2.点击child：
child1
这里写图片描述
解释：点击child这个元素，事件监听的对象是child这个元素，目标也是这个元素，currentTarget就是child，target也是这个元素。执行完child这个元素上的事件后，冒泡到它的父元素，监听的对象就是parent，而目标元素依然是child这个元素。
通俗一点就是，e.currentTarget是注册了事件监听的对象，而e.target是该对象里的子对象，也就是触发了这个事件的对象。

关于this：

<div id="parent" onclick="alert(this.id)">
    <div id="child" onclick="alert(this.id)">来点我呀？！</div>
</div>

执行结果：
1.点击父元素：弹出parent
2.点击子元素：弹出child，弹出parent
解释：
1.点击parent，this指的就是当前绑定click事件的这个对象，弹出它的id，冒泡上去，也没什么。。
2.点击child，this先指向child这个元素，因为默认是事件冒泡嘛，所以弹出child，然后向上冒泡，在parent元素上也触发这个事件，this就指向parent这个元素，弹出它的id。一句话来说，this和currentTarget是一样的。

附：参考的资料
http://www.cnblogs.com/qq9694526/p/5653728.html
http://blog.csdn.net/magic__man/article/details/51781425
JavaScript高级程序设计（第三版）

标签

#事件捕获 #事件冒泡 #target #事件流 #JavaScript