事件冒泡与事件捕获

2018-10-11 10:00:19来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

需要了解的知识点:

  1. 向指定元素添加事件的方法:addEventListener()方法

  2. Dom2级事件中事件流的三个阶段:事件捕获阶段、目标元素、事件冒泡阶段

  3. javascript中 “this与e.target”的区别

 

 addEventListener()方法

  语法:addEventListener(event , function ,useCapture);

  说明:event:事件名称,必填。

     function:事件触发时要执行的函数,必填。

     useCapture:blooen值,可选,事件是否在捕获或冒泡阶段执行。

          true:事件在捕获阶段执行

          false:事件在冒泡阶段执行

 

事件捕获

  1.什么是事件捕获:

    从根节点将事件传播到目标元素的过程

  2.demo1:

  html代码

<div class="box">
     <p class="box1"></p>
</div>

  css代码

.box{
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow: hidden;
}
.box1{
    width: 150px;
    height: 150px;
    background-color: #FF0000;
    margin: 75px auto;
}

  js代码

 //获取被操作的元素

 var div_v = document.querySelector('.box');
 var p_v = document.querySelector('.box1');

div_v.addEventListener('click' , function  () {
    console.log("父级元素");
} ,true);
p_v.addEventListener('click' , function  () {
    console.log("子集元素");
} ,true);
document.getElementsByTagName("body")[0].addEventListener('click' ,function  () {
    console.log("根元素");
} ,true);

事件冒泡

  1.什么是事件冒泡

    从目标元素向上级元素冒泡一直到根节点

  2.demo2

    Html/css部分与demo1相同

    js代码

 //获取被操作的元素

 var div_v = document.querySelector('.box');
 var p_v = document.querySelector('.box1');


div_v.addEventListener('click' , function () { console.log("父级元素"); }); p_v.addEventListener('click' , function () { console.log("子集元素"); }); document.getElementsByTagName("body")[0].addEventListener('click' ,function () { console.log("根元素"); });

 

 

“this与e.target”的区别(理解即可)

  在js中由于冒泡事件的影响,所以this的值是不确定的,而 e.target 则只会接受该事件的目标Dom元素,所以在使用的之前要根据需求而选择。

 

好了,结合上述的例子,写一个大同小异的例子,实现代码如下:

html代码

<ul>
    <li>子元素1</li>
    <li>子元素2</li>
    <li>子元素3</li>
</ul>

 

css代码

ul{
    width: 100px;
    border: 1px solid #000;
}
li{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    list-style: none;
    cursor: pointer;
}

 

js代码

var ul_v = document.querySelector('ul');
ul_v.addEventListener('mouseover' ,function  (e) {
    //e.target.parentNode.children 获取父元素下的所有子元素
    //使用e.target 不适用this 的原因:受到冒泡的影响,this会改变,而e.target只接受事件的目标DOM元素
    for (var i = 0;i<e.target.parentNode.children.length;i++) {
        e.target.parentNode.children[i].style.backgroundColor = "#fff";
    }
    e.target.style.backgroundColor = "red";
});

 

 

以上是本人对事件冒泡与事件捕获的潜在理解,里边有不足的地方还望大家提出,大家一起交流讨论!

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js 数组插入和删除处理

下一篇:纯JS实现前端动态分页码