js冒泡事件的深入分析

在javascript dom操作中，您肯定会遇到js冒泡事件，其中最常见的是div弹出事件，如图表

单击灰色部分时，弹出窗口消失，而单击黑色部分则没有效果。

通过下面的代码分析js的冒泡事件

Html代码：

复制代码如下：doctype html lang=' en ' Head metacarset=' utf-8 ' title js冒泡事件/title linkrel='样式表' href=' style . CSS '/Head body div class=' container ' h1js冒泡事件分析/h1hr div class=' boxbg-gray ' button class=' BTN ' click me！/button /div /div脚本var box=document.querySelector('。box ')，btn=document.querySelector ' .BTN’)；box . onclick=function(event){ alert('我是div ')；} BTN。onclick=function (event) {alert('我是按钮')；}/脚本/正文/html

使用firefox浏览器默认开发工具的3d视图，您可以清楚地看到div层的顺序

插图：

当点击按钮时，会弹出“我是按钮”，然后弹出“我是div”，因为首先触发按钮事件，然后触发下一个div点击事件。

事件的触发是先进先出原则。

插图：

然后有时候我们不想触发多个事件引起冲突，所以event有stopperpagation()；停止冒泡的方法

还有一个同样常用的事件方法，比如链接。如果我点击链接时不想跳转，请使用event . preventdefault()；方法

示例代码如下

复制代码如下：doctype html lang=' en ' Head metacarset=' utf-8 ' title js冒泡事件/title linkrel='样式表' href=' style . CSS '/Head body div class=' container ' h1js冒泡事件分析/h1hr div class=' boxbg-gray ' button class=' BTN ' click me！/button a href=' http://www . liteng . org ' id=' link '我是一个链接/a/div/div脚本varbox=document.queryselector('。方框')，BTN=document.queryselector('。BTN ')；box . onclick=function(event){ alert('我是div ')；} BTN。onclick=function (event) {alert('我是按钮')；event . stopperpagation()；} document.getelementbyid ('link ')。onclick=function (event) {alert('我是link ')；event . preventdefault()；}/*区分event . stopperpagation()；和event . preventdefault()；前者使用stopPropagation()方法防止事件冒泡，而后者防止默认行为，如阻止超链接*//脚本/正文/html

我的朋友们能完全理解js冒泡事件吗？如果你有任何问题，给我留言