首页 > > 网页制作 > Javascript >

事件冒泡与事件捕获

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

需要了解的知识点：

　　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";
});