Javascript 冒泡、捕獲、事件代理

時間 2019-11-06

標籤 javascript 冒泡捕獲事件代理欄目 JavaScript 简体版

原文原文鏈接

2019開工荒了兩天，趕忙開始！javascript

爲何寫事件代理、冒泡、捕獲，首先冒泡和捕獲是js事件的核心基礎，事件代理原理來自冒泡和捕獲。html

此文章略過標準瀏覽器和非標準瀏覽器的事件流講解，緣由很簡單咱們如今已經幸福了，已經不考慮IE六、七、8了java

直接說現代瀏覽器事件流，用兩張圖看看什麼是冒泡什麼是捕獲，其實從字面意思大概能看出一個是向外一個是向內。瀏覽器

標準事件流

一、捕獲階段（先從最外層向內查找）
二、目標階段（找到事件元（當前點擊的dom））
三、冒泡階段（向上冒泡傳遞事件）dom

事件冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>冒泡</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    div {
        padding: 30px;
    }
    
    .div1 {
        background: red
    }
    
    .div2 {
        background: blueviolet
    }
    
    .div3 {
        background: yellowgreen
    }
</style>

<body>
    <div class="div1">
        父
        <div class="div2">
            子
            <div class="div3">
                孫
            </div>
        </div>
    </div>
    <script>
       // javascript事件綁定addEventListener接收三個參數，
       //  一、事件名稱字符串且不帶on
       //  二、回調函數
       //  三、事件流方式（默認爲冒泡（false），捕獲爲true）
        window.onload = function() {
            document.querySelector('.div1').addEventListener('click', function() {
                console.log('點擊div1')
            }, false)
            document.querySelector('.div2').addEventListener('click', function() {
                console.log('點擊div2')
            }, false)
            document.querySelector('.div3').addEventListener('click', function() {
                console.log('點擊div3')
            }, false)
        }
    </script>
</body>

</html>

先演示下冒泡
函數

事件捕獲

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>冒泡</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    div {
        padding: 30px;
    }
    
    .div1 {
        background: red
    }
    
    .div2 {
        background: blueviolet
    }
    
    .div3 {
        background: yellowgreen
    }
</style>

<body>
    <div class="div1">
        父
        <div class="div2">
            子
            <div class="div3">
                孫
            </div>
        </div>
    </div>
    <script>
        window.onload = function() {
            document.querySelector('.div1').addEventListener('click', function(e) {
                console.log('點擊父元素')
            }, true)
            document.querySelector('.div2').addEventListener('click', function(e) {
                console.log('點擊子元素')
            }, true)
            document.querySelector('.div3').addEventListener('click', function(e) {
                console.log('點擊孫子元素')
            }, true)
        }
    </script>
</body>

</html>

看看效果
ui

事件委託

我理解的事件委託的好處有兩點
一、減小事件綁定次數
二、能夠給未知元素綁定事件（例如動態渲染的List）spa

其原理就是利用事件冒泡向外傳遞的特性，下面代碼解析一下：
一樣忽略低版本瀏覽器獲取當前target兼容性問題3d

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>冒泡</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    div {
        padding: 30px;
        border: 1px solid red
    }
    
    div span {
        display: inline-block;
        padding: 10px;
        border: 1px solid blueviolet
    }
</style>

<body>
    <div class="div1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <script>
        window.onload = function() {
            document.querySelector('.div1').addEventListener('click', function(e) {
                //回調函數e爲事件對象，同夥事件對象能夠獲取當前點擊dom
                console.log(e.target)
                //獲取到當前事件源（dom）後再去搞一些你想搞的事情就ok了

                //搞事情代碼
            }, false)

        }
    </script>
</body>

</html>

老規矩，看看效果
代理