JS冒泡事件 与 事件捕获

案例

<!DOCTYPE html>

<html>

<head>

    <title>冒泡事件</title>

    <script type="text/javascript">

        window.onload = function(){

            window.onclick = function(){

                alert("Window"); // 顶级

            };

            document.onclick = function(){

                alert("Document"); // 次顶级

            };

            document.documentElement.onclick = function(){

                alert("Html"); // 次次顶级

            };

            document.body.onclick = function(){

                alert("Body"); // 次次次顶级

            };

            document.getElementById("myDiv").onclick = function(){

                alert("Div"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话

            };

        }

    </script>

</head>

<body>

    <div id="myDiv">点我</div>

</body>

</html>

小结

1.点击myDiv。依次是Div-Body-Html-Document-Window

2.点击其他空白地方。依次是Html-Document-Window

3.连续点击两次，会按顺序执行两次

4.冒泡的前提是，父级也定义了相应的事件

再看一个更复杂的例子

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>事件捕捉</title>

    <script type="text/javascript">

        window.onload = function(){

            window.addEventListener("click", function(){

                alert("Window - true");

            }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

            document.addEventListener("click", function(){

                alert("Document - true");

            }, true);

            document.documentElement.addEventListener("click", function(){

                alert("Html - true");

            }, true);

            document.body.addEventListener("click", function(){

                alert("Body - true");

            }, true);

            document.getElementById("myDiv").addEventListener("click", function(){

                alert("Div - true");

            }, true);

            window.addEventListener("click", function(){

                alert("Window - false");

            }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

            document.addEventListener("click", function(){

                alert("Document  - false");

            }, false);

            document.documentElement.addEventListener("click", function(){

                alert("Html  - false");

            }, false);

            document.body.addEventListener("click", function(){

                alert("Body  - false");

            }, false);

            document.getElementById("myDiv").addEventListener("click", function(){

                alert("Div  - false");

            }, false);

            window.onclick = function(){

                alert("Window - click"); // 顶级

            };

            document.onclick = function(){

                alert("Document - click"); // 次顶级

            };

            document.documentElement.onclick = function(){

                alert("Html - click"); // 次次顶级

            };

            document.body.onclick = function(){

                alert("Body - click"); // 次次次顶级

            };

            document.getElementById("myDiv").onclick = function(){

                alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话

            };

        }

    </script>

</head>

<body>

    <div id="myDiv">点我</div>

</body>

</html>

小结

1.点击的执行结果是

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

Body - false

Body - click

Html - false

Html - click

Document - false

Document - click

Window - false

Window - click

2.顺序与js代码顺序无关

3.就算没有定义点击事件，一样可以捕获点击事件，只要点击到，就能捕获到

再次改造，阻止冒泡

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>事件捕捉</title>

    <script type="text/javascript">

        window.onload = function(){

            document.addEventListener("click", function(){

                alert("Document - true");

            }, true);

            window.addEventListener("click", function(){

                alert("Window - true");

            }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

            document.documentElement.addEventListener("click", function(){

                alert("Html - true");

            }, true);

            document.body.addEventListener("click", function(){

                alert("Body - true");

            }, true);

            document.getElementById("myDiv").addEventListener("click", function(){

                alert("Div - true");

            }, true);

            window.addEventListener("click", function(){

                alert("Window - false");

            }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

            document.addEventListener("click", function(){

                alert("Document  - false");

            }, false);

            document.documentElement.addEventListener("click", function(){

                alert("Html  - false");

            }, false);

            document.body.addEventListener("click", function(){

                alert("Body  - false");

            }, false);

            document.getElementById("myDiv").addEventListener("click", function(){

                alert("Div  - false");

            }, false);

            window.onclick = function(){

                alert("Window - click"); // 顶级

            };

            document.onclick = function(){

                alert("Document - click"); // 次顶级

            };

            document.documentElement.onclick = function(){

                alert("Html - click"); // 次次顶级

            };

            document.body.onclick = function(){

                alert("Body - click"); // 次次次顶级

            };

            document.getElementById("myDiv").onclick = function(){

                alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话

                event.stopPropagation(); // 阻止冒泡

            };

        }

    </script>

</head>

<body>

    <div id="myDiv">点我</div>

</body>

</html>

小结

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

终止了，没有后续的内容了

JS冒泡事件 与 事件捕获的更多相关文章

  1. 浅谈js冒泡事件2

    js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...

  2. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  3. js事件机制——事件冒泡和捕获

    概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...

  4. JS事件（事件冒泡和事件捕获）

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  5. Js冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  6. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  7. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  8. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  9. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

随机推荐

  1. phpStorm中ftp的配置与使用,支持配置多个

    小结:很方便,支持ftp功能和比较. 扩展,可以查看远程文件和日期 配置多个ftp

  2. 剑指offer——01二维数组中的查找（Python3）

    题目:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...

  3. Jquery validform

    一.validform是什么?            validform是一款智能的表单验证js插件,它是基于jQuery库与css,我们只需要把表单对象放入,             就可以对整个表 ...

  4. C#比较二个数组并找出相同或不同元素的方法

    这篇文章主要介绍了C#比较二个数组并找出相同或不同元素的方法,涉及C#针对数组的交集.补集等集合操作相关技巧,非常简单实用, 具有一定参考借鉴价值,需要的朋友可以参考下 " }; " ...

  5. roscore不能启动

    通过VNC 在VNC窗口上出入 roscore  得到下面错误信息 ----------------------------------------------------------- proces ...

  6. BZOJ 4129 树上带修莫队+线段树

    思路: 可以先做做BZOJ3585 是序列上的mex 考虑莫队的转移 如果当前数字出现过 线段树上把它置成1 对于询问 二分ans 线段树上查 0到ans的和 是不是ans+1 本题就是把它搞到了序列 ...

  7. 2018年江西理工大学C语言程序设计竞赛高级组部分题解

    B Interesting paths 考察范围:组合数学 此题是机器人走方格的变种,n*m的网格,从(1,1)走到(n,m),首先可以明确,水平要走m-1格,竖直要走n-1格,则走到目的地的任意一条 ...

  8. XP访问WIN10共享打印机提示错误：操作无法完成,拒绝访问

    XP系统添加打印机--连接到此计算机的本地打印机(取消自动检测)--创建新端口(LOCAL port)----输入端口名\\计算机名\打印机名.(例如:\\adubei\\HP lasjet 1020 ...

  9. ZBrush软件特性之Color调控板

    ZBrush®中的Color调色板显示当前颜色并提供数值的方法选择颜色,而且选择辅助色,使用描绘工具可以产生混合的色彩效果. ZBrush 4R8下载:http://wm.makeding.com/i ...

  10. CF1012B Chemical table 构造_思维_并查集

    我们可以将横坐标和纵坐标看成是点.发现这些点之间是有传递性的. 题中说明,如果有矩阵中三个顶点被选,则底角的点也会被覆盖,发现这些点之间是有传递性的.那么我们最终达到的目的就是使整个图中只有 111 ...