模型 center idt get div 遍历 line eve
有 3 个阶段
1、 捕获阶段:由外向内,记录各级父元素上绑定的事件处理函数 --- 只记录,不触发。
2、 目标触发:优先触发目标元素上的事件处理函数。
3、 冒泡:由内向外,按捕获的顺序的相反的方向,依次执行父元素上的事件处理函数。
过程如下图所示:
如果希望阻止某些冒泡行为, 如表单验证失败时, 不允许提交, 可以使用 e.stopPropagation(); 取消冒泡:
什么时候使用利用冒泡:
都知道, 浏览器通过遍历方式查找事件处理函数执行。如果添加的事件监听越多,遍历越慢,网页响应速度越慢, 因此
尽量少的添加事件监听.
如果多个平级子元素绑定相同事件时,可在父元素仅添加一个事件监听,所有子元素共用, 并且使用 e.target 获取目标元素.
下面的代码是一个很经典的理解事件处理的例子:
这里, 咱希望的是, 点击那个 div, 那个就变黄, 可是如果不加 e.stopPropagation 的话, 在点击 d3 或 d2 时, 都会冒泡执行其父元素的操作,
比如点击, 最里面的 d3, 上面的 d2,d1 都会依次变黄.
- <!DOCTYPE html>
- <html>
- <head>
- <title>事件处理</title>
- <meta charset="utf-8"/>
- <style>
- .d1 .d2 .d3{cursor:pointer}
- .d1 {
- background-color: green;
- position: relative;
- width: 150px;
- height: 150px;
- text-align: center;
- cursor: pointer;
- }
- .d2 {
- background-color: blue;
- position: absolute;
- top: 25px;
- left: 25px;
- width: 100px;
- height: 100px;
- }
- .d3 {
- background-color: red;
- position: absolute;
- top: 25px;
- left: 25px;
- width: 50px;
- height: 50px;
- line-height: 50px;
- }
- </style>
- </head>
- <body>
- <div class="d1">
- <div class="d2">
- <div class="d3">
- </div>
- </div>
- </div>
- <script>
- function highLight(e){
- this.style.background="yellow";
- alert(this.className);
- this.style.background="";
- //取消冒泡 如果不加的话,在点击d3或d2时,都会冒泡执行其父元素的操作
- e.stopPropagation();
- }
- document.querySelector(".d1")
- .addEventListener(
- "click",highLight);
- document.querySelector(".d2")
- .addEventListener(
- "click",highLight);
- document.querySelector(".d3")
- .addEventListener(
- "click",highLight);
- </script>
- </body>
- </html>
Js 事件处理模型 / 周期
来源: http://www.bubuko.com/infodetail-2034309.html