黑马程序员技术交流社区

标题: immediate和stopPropagation函数的区别 [打印本页]

---

作者: 庭院深深深几许    时间: 2019-1-4 10:43
标题: immediate和stopPropagation函数的区别
在事件处理程序中，每个事件处理程序中间都会有一个event对象，而这个event对象有两个方法，一个是stopPropagation方法，一个是stopImmediatePropagation方法，两个方法只差一个Immediate，这里就说说这两个方法的区别
1、stopImmediatePropagation方法：
stopImmediatePropagation方法作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行
2、stopPropagation方法
stopPropagation方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序
区别：
从概念上讲，在调用完stopPropagation函数之后，就会立即停止对后续节点的访问，但是会执行完绑定到当前节点上的所有事件处理程序;而调用stopImmediatePropagation函数之后，除了所有后续节点，绑定到当前元素上的、当前事件处理程序之后的事件处理程序就不会再执行了
举个例子：
//html代码

[HTML] 纯文本查看 复制代码

<div id = "div1">

    <button id = "button1"></button>

</div>

//js代码

[JavaScript] 纯文本查看 复制代码

　　var div = document.getElementById("div1");

    var btn = document.getElementById("button1");

            

    div.addEventListener("click" , function(){alert("第一次执行");} , true);        //1

    div.addEventListener("click" , function(){alert("第二次执行");} , true);        //2

    btn.addEventListener("click" , function(){alert("button 执行");});            //3

在这里，给 1 函数alert后加上stopImmediatePropagation， 那么之后弹出窗口“第一次执行”
但是如果给 1 函数alert后加上stopPropagation ， 那么之后会弹出窗口“第一次执行”，“第二次执行”两个窗口

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2