事件流：事件冒泡和事件捕獲

時間 2019-11-18

原文原文鏈接

事件流：事件冒泡和事件捕獲

1. 二者概念

事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。，javascript
```
element.addEventListener(event,function(),false);
```
事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否爲事件捕獲。css
```
element.addEventListener(event,function(),true);
```
從上面可知，第三個參數爲true或者false;
- true,事件捕獲；
- false,事件冒泡。(默認)
jQuery的e.stopPropagation會阻止冒泡html

2. 案例分析

這是HTML結構：一個父級容器中套着一個子集容器java

<div class="parent">
    <div class="child"></div>
</div>

接下來給它們綁定上事件：jquery

document.querySelector(".parent").addEventListener("click",function(e){
        alert("parent事件被觸發，"+this.className);
    })
    document.querySelector(".child").addEventListener("click",function(e){
        alert("child事件被觸發，"+this.className)
    })

效果展現app

結果：this

child事件被觸發，child
parent事件被觸發，parent

結論：先child，而後parent。事件的觸發順序自內向外，這就是事件冒泡。code

擴展：cdn

querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素;
只會返回第一個符合要求的。好比兩個class="parent";
document.querySelector('.parent')只會查詢第一個符合要求的。
querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的全部元素；
document.querySelectorAll('.parent')[0] 獲取的是第一個符合class = "parent"的元素節點。
document.querySelectorAll('.parent')[1] 獲取的是第二個符合class = "parent"的元素節點。

如今改變第三個參數的值爲truehtm

document.querySelector(".parent").addEventListener("click",function(e){
        alert("parent事件被觸發，"+this.className);
    },true)
    document.querySelector(".child").addEventListener("click",function(e){
        alert("child事件被觸發，"+this.className)
    },true)

效果展現

結果：

parent事件被觸發，parent
child事件被觸發，child

結論：先parent,而後child。事件觸發順序變動爲自外向內，這就是事件捕獲。

3. 應用案例

<ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>

需求：鼠標放到li上對應的li背景變灰。

利用事件冒泡實現：（知識應用）

$("ul").on("mouseover",function(e){
    $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })

給全部li都綁上事件（初始想法）

　　$("li").on("mouseover",function(){
                $(this).css("background-color","#ddd").siblings().css("background-color","white");
            })

這樣也行。並且從代碼簡潔程度上，二者相差無幾。

可是，若是咱們在綁定事件完成後，又給ul添加子元素li:

$("ul").append("<li>item</li>");

此時，第二種方案，因爲綁定事件的時候li還不存在，因此當新添加li時候，效果不起做用（新的li未綁定事件）。因此爲了效果，咱們還要給它再綁定一次事件。這時候使用事件冒泡方法實現就突出優點！！！

4. 完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和事件捕獲</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        .parent{
            border: 1px solid red ;
            height: 200px;
            width: 200px;

        }
        .child{
            background-color: #e7ff69;
            height: 100px;
            width: 100px;
            margin: 0 auto;
            margin-top: 50px;
        }
    </style>
</head>

<body>
<hr>
<h3>1.事件冒泡：從內向外;第三個參數爲false(默認值)</h3>
<hr>
<div class="parent">
    <div class="child"></div>
</div>


<hr>
<h3>2.事件捕獲：從外向內：第三個參數爲true</h3>
<hr>
<div class="parent">
    <div class="child"></div>
</div>


<br>
<br>
<hr>
<h3>3.應用案例</h3>
<hr>
<input type="button" value="添加一個li" id="btn">
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>
<script>
    document.querySelector(".parent").addEventListener("click",function(e){
        alert("parent事件被觸發，"+this.className);
    })
    document.querySelector(".child").addEventListener("click",function(e){
        alert("child事件被觸發，"+this.className)
    })


    document.querySelectorAll(".parent")[1].addEventListener("click",function(e){
        alert("parent事件被觸發，"+this.className);
    },true)
    document.querySelectorAll(".child")[1].addEventListener("click",function(e){
        alert("child事件被觸發，"+this.className)
    },true)

    $("#btn").click(function () {
        $("ul").append("<li>item</li>");
    });

    /*//僅僅對li簡單的綁定事件會使得添加了新的li時候，得從新給他綁定上事件，不然不起做用。下面方法很差
    $("li").on("mouseover",function(){
        $(this).css("background-color","#ddd").siblings().css("background-color","white");
    })*/
    //利用事件冒泡實現
    $("ul").on("mouseover",function(e){
        $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
    })

</script>


</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。