什么是事件委托？ js事件委托怎么實(shí)現(xiàn)？

更新時間:2021-10-29 來源:黑馬程序員瀏覽量:

什么是事件委托？

由于事件會在冒泡階段向上傳播到父節(jié)點(diǎn)，因此可以把子節(jié)點(diǎn)的監(jiān)聽函數(shù)定義在父節(jié)點(diǎn)上，由父節(jié)點(diǎn)的監(jiān)聽函數(shù)統(tǒng)一處理多個子元素的事件，種方法叫做“事件代理”，也叫“事件委托”。

事件委托的原理：

利用事件冒泡，只指定一個事件處理程序來管理某一類型的所有事件。

事件委托的優(yōu)勢：

作減少DOM操作，節(jié)省內(nèi)存空間，提高性能。

事件委托常用方法：

event.target：對事件起源目標(biāo)的引用，屬性返回觸發(fā)事件的那個節(jié)點(diǎn)。

event.currentTarget：屬性返回事件當(dāng)前所在的節(jié)點(diǎn)，即正在執(zhí)行的監(jiān)聽函數(shù)所綁定的那個節(jié)點(diǎn)。作為比較，target屬性返回事件發(fā)生的節(jié)點(diǎn)。

<!DOCTYPE html>
<html lang="en">
<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>event.target和event.currentTarget|http://web.itheima.com</title>
    <style>
        div{
            padding: 40px;
        }
        #div3{
            width: 300px;
            height: 300px;
            background-color: #AB1B1A;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: #F5E1C6;
        }
        #div1{
            width: 100px;
            height: 100px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="div3">3
        <div id="div2">2
            <div id="div1">1</div>
        </div>
    </div>
</body>
    <script>
        var div3 = document.getElementById('div3');
        div3.onclick = function(e){
            //返回事件綁定的節(jié)點(diǎn)
            console.log(e.currentTarget);
            //返回觸發(fā)節(jié)點(diǎn)
            console.log(e.target);
        }
    </script>
</html>

1635488784595_事件委托.jpg

事件綁定在div3上，點(diǎn)擊div1，e.currentTarget返回綁定事件元素div3，e.target返回觸發(fā)事件元素div1。

簡單事件委托實(shí)現(xiàn)

功能：依次點(diǎn)擊div1，div2，div3盒子變?yōu)榧t色。

<!DOCTYPE html>
<html lang="en">
<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>event.target和event.currentTarget|http://web.itheima.com</title>
    <style>
        div{
            padding: 40px;
        }
        #div3{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #div2{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        #div1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div3">3
        <div id="div2">2
            <div id="div1">1</div>
        </div>
    </div>
</body>
    <script>
        let div3 = document.getElementById("div3");
        // 點(diǎn)擊事件綁定到div3
        div3.onclick = function(e){
            // 觸發(fā)節(jié)點(diǎn)改變位紅色
            e.target.style.background = "red";

        }
    </script>
</html>

1635488721744_事件委托.gif