淺析js中事件冒泡與事件捕獲

更新時間：2021年08月20日 15:03:11 作者：Henry_ww

js中事件冒泡、事件捕獲一直都是困擾大家的問題，本文利用大量代碼解釋了js中事件冒泡與事件捕獲，希望對小伙伴們有所幫助

01-事件冒泡

1.1-事件冒泡介紹

本小節(jié)知識點：介紹什么是事件冒泡

事件冒泡：如果一個元素的事件被觸發(fā)，那么他的所有父級元素的同名事件也會被依次觸發(fā)

元素->父元素->body->html->document->window

事件冒泡一直存在，只不過以前我們沒有給父級元素加同名事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
    <style>
        .parent {
            position: relative;

            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .son {
            position: absolute;

            left: 400px;
            top: 300px;

            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 冒泡: bubble -->

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

    <script>
        // 證明冒泡: 給父子添加同類型事件即可

        const parent = document.querySelector('.parent')
        const son = parent.firstElementChild

        // 給父子綁定點擊事件
        parent.onclick = function () {
            console.log('parent')
        }

        // 點擊parent元素： 輸出parent， 點擊son元素： 也輸出parent
        // 1. 事件是所有元素都有的： 給不給事件， 都有
        // 2. 點擊son觸發(fā)了parent的點擊事件： 事件冒泡發(fā)生

        // 所有元素都有事件， 包括頂級對象window
        window.onclick = function () {
            console.log('window')
        }

        // 事件鏈條： 目標元素-》上級-》上級-》body-》html-》document-》window
        // 事件冒泡： 大部分的時候沒用（還有壞處）
    </script>
</body>

</html>

1.2-事件冒泡利用（事件委托）

本小節(jié)知識點：介紹事件冒泡的好處

事件冒泡好處：如果想給父元素的多個子元素添加事件，我們可以只需要給父元素添加事件即可，然后

通過獲取事件源(e.target)就可以得知是哪一個子元素觸發(fā)了這個事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡 - 應(yīng)用 - 事件委托</title>
    <style>
        li {
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <ul>
        <li>百里守約1</li>
        <li>百里守約2</li>
        <li>百里守約3</li>
    </ul>

    <script>
        // 需求: 給所有l(wèi)i增加鼠標的移入移出事件: 變色即可
        // document.querySelectorAll('li').forEach(function (li) {
        //     li.onmouseover = function () {
        //         this.style.backgroundColor = 'red'
        //     }

        //     li.onmouseout = function () {
        //         this.style.backgroundColor = ''
        //     }
        // })

        // 1. 代碼的執(zhí)行效率偏低: 需要給所有的li,一個一個的綁定事件
        // 2. 可擴展性弱: 新增一個li,將會無效
        // innerHTML: 所有都無效
        // document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>'
        // 邏輯: 取出ul中的所有l(wèi)i(結(jié)構(gòu),不包含事件), 再放進去(字符串形式): 所有的事件全部丟失

        // document.createElement() + appendChild(): 新增的無效
        // let li = document.createElement('li')
        // li.innerHTML = 'creatElement創(chuàng)建的li'
        // document.querySelector('ul').appendChild(li)

        // 事件委托: 將子元素該綁定的事件(效果代碼) 綁定到父元素身上
        document.querySelector('ul').onmouseover = function (e) {
            // 事件對象中: e.target 是觸發(fā)事件的原始目標(最上面的孩子)
            console.log(e.target)

            // 如何區(qū)分目標元素是li還是ul呢? 節(jié)點: 節(jié)點三要素
            // nodeType: li和ul都是元素,   1
            // nodeValue: li和元素都是元素, null
            // nodeName: 是元素標簽名字的大寫: LI UL
            console.log(e.target.nodeName)
            if (e.target.nodeName === 'LI') {
                // 是目標元素
                e.target.style.backgroundColor = 'red'
            }
        }

        document.querySelector('ul').onmouseout = function (e) {
            if (e.target.nodeName === 'LI') {
                // 是目標元素
                e.target.style.backgroundColor = ''
            }
        }

        // 最大的優(yōu)點: 事件綁定一次(性能極大提升)
        // 次要優(yōu)點: 不論是innerHTMl的修改還是createElement的創(chuàng)建: 所有的li都有效
        // document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>'
        // 正是因為有了事件委托: 以后不用再使用創(chuàng)建元素,直接使用innerHTML方便太多

        // let li = document.createElement('li')
        // li.innerHTML = 'creatElement創(chuàng)建的li'
        // document.querySelector('ul').appendChild(li)

        // 事件委托: 是事件冒泡唯一的價值(挺有用)
    </script>
</body>

</html>

1.3-事件冒泡影響與阻止事件冒泡

本小節(jié)知識點：介紹事件冒泡的影響

事件冒泡會導(dǎo)致需求沖突：例如我想要添加一個功能，彈出登錄窗之后點擊body空白區(qū)域讓登陸窗消失
此時a標簽彈出登錄窗的點擊事件會觸發(fā)body的點擊事件，導(dǎo)致登陸窗一出來就消失

解決方案：阻止事件冒泡（下一小節(jié)知識點）

本小節(jié)知識點：阻止事件冒泡

阻止事件冒泡：讓同名事件不要在父元素中冒泡（觸發(fā)）

 * 說人話：點擊一個元素只會觸發(fā)當(dāng)前元素的事件，不會觸發(fā)父元素的同名事件

語法：事件對象.stopPropagation() IE8及之前不支持

事件對象.cancelBubble = true IE8之前支持

注意：如果想要阻止事件冒泡，一定要在觸發(fā)事件的函數(shù)中接收事件對象

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡 - 影響 - 阻止事件冒泡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            display: block;

            width: 200px;
            margin: 20px auto;
        }

        .form {
            position: relative;

            width: 400px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #ccc;

            display: none;
        }

        .form span {
            display: block;
            position: absolute;
            right: -25px;
            top: -25px;

            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;

        }
    </style>
</head>

<body>
    <a href="javascript:;" rel="external nofollow" >點我顯示登錄框</a>

    <div class="form">
        <span>X</span>
        用戶名: <input type="text" name="username"><br>
        密碼: <input type="password" name="password"><br>
        <button>登錄</button>
    </div>

    <script>
        // 事件冒泡: 子元素事件觸發(fā), 導(dǎo)致父元素相同事件被觸發(fā)

        // 需求: 點擊 鏈接 顯示登錄框, 點擊任何空白地方, 都要隱藏登錄框
        const a = document.querySelector('a')
        const form = document.querySelector('.form')
        const x = form.firstElementChild

        // 阻止冒泡: 阻止事件的傳遞: 事件對象e.stopPropagation()
        // 子元素如果不希望父元素觸發(fā)子元素相同的事件: 在子元素的事件中,阻止傳遞

        // 1. 給a做點擊事件: 顯示div.form
        a.onclick = function (e) {
            console.log('a')
            form.style.display = 'block'

            console.log(e)
            // 阻止傳遞: 點擊事件, 到a這里結(jié)束
            e.stopPropagation()
        }

        // 2. 點擊空白隱藏div.form: 簡單: 給document || window做點擊事件
        document.onclick = function () {
            console.log('document')
            form.style.display = ''
        }

        // 3. 為了安全: 讓整個formdiv都可以點擊, 不會傳遞
        form.onclick = function (e) {
            e.stopPropagation()
        }

        // 4. 點擊關(guān)閉
        x.onclick = function () {
            form.style.display = ''
        }

        // 總結(jié)
        // 實際開發(fā)中: 可能會出現(xiàn)父子出現(xiàn)相同類型的事件, 如果效果相反(a要顯示div,document要隱藏div),一般會用到阻止事件傳遞: e.stopPropagation()
    </script>
</body>

</html>

02-事件捕獲

1.1-事件捕獲介紹

本小節(jié)知識點：事件捕獲

1.事件冒泡：從觸發(fā)事件元素，一級一級往上找父元素觸發(fā)同名事件，如果有就觸發(fā)
2.事件捕獲：從最頂級的父元素一級一級往下找子元素觸發(fā)同名事件，直到觸發(fā)事件的元素為止

事件捕獲與事件冒泡觸發(fā)事件的順序完全相反

3.事件捕獲，只能通過addEventListener并且參數(shù)寫true才是事件捕獲

其他都是冒泡（不是通過addEventListener添加、addEventListener參數(shù)為false）

4.事件對象.stopPropagation() 除了可以阻止冒泡還可以阻止捕獲
5.IE8及以前沒有捕獲！

1.2-事件三個階段

本小節(jié)知識點：介紹事件的三個階段

1.事件一共有三個階段：事件的執(zhí)行順序

1–捕獲階段：
2–目標階段：
3–冒泡階段：

2.事件對象.eventPhase 可以獲得觸發(fā)這個事件時，到底是哪個階段
3.先從最頂級往下一級一級捕獲，然后到目標的捕獲，目標的冒泡，再一級一級往上冒泡

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件捕獲</title>
</head>

<body>
    <div class="box">我是小馬哥</div>

    <script>
        // on事件: 全部都是冒泡事件

        window.onclick = function () {
            console.log('window的冒泡事件')
        }

        document.onclick = function () {
            console.log('document的冒泡事件')
        }

        const box = document.querySelector('.box')

        box.onclick = function () {
            console.log('box的冒泡事件')
        }

        // 捕獲事件:只有一種方式 addEventListener('事件類型',回調(diào)函數(shù),true)
        window.addEventListener('click', function () {
            // console.log('window的捕獲事件')
        }, true)

        document.addEventListener('click', function () {
            console.log('document的捕獲事件')
        }, true)

        // 事件捕獲的唯一價值: 給事件目標做準備

        // 事件流: 先捕獲  后目標  再冒泡
        // 目標階段: 不區(qū)分捕獲還是冒泡(哪個代碼在前面,哪個先執(zhí)行)
        // 最新的谷歌: 先捕獲后冒泡
        // IE是按順序(目標階段)

        // box前面已經(jīng)有點擊冒泡
        box.addEventListener('click', function () {
            console.log('box的捕獲事件')
        }, true)

        // e.stopPropagation() 組織事件傳遞： 如果在捕獲階段阻止: 導(dǎo)致js出bug
        window.addEventListener('click', function (e) {
            e.stopPropagation()
        }, true)

    </script>
</body>

</html>```

到此這篇關(guān)于淺析js中事件冒泡與事件捕獲的文章就介紹到這了,更多相關(guān)js事件冒泡與事件捕獲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: