事件委托

什么是事件委托？


由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父 节点上，由父节点的监听函数统一处理多个子元素的事件，种方法叫做“事件代理”，也叫“事件委托”。


事件委托的原理：

利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。


事件委托的优势：

作减少DOM操作，节省内存空间，提高性能。

事件委托常用方法：

event.target：对事件起源目标的引用，属性返回触发事件的那个节点。

event.currentTarget：属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。 作为比较，target属性返回事件发生的节点。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>event.target和event.currentTarget|http://web.itheima.com</title>
 8     <style>
 9         div{
10             padding: 40px;
11         }
12         #div3{
13             width: 300px;
14             height: 300px;
15             background-color: #AB1B1A;
16         }
17         #div2{
18             width: 200px;
19             height: 200px;
20             background-color: #F5E1C6;
21         }
22         #div1{
23             width: 100px;
24             height: 100px;
25             background-color: #fff;
26         }
27     </style>
28 </head>
29 <body>
30     <div id="div3">3
31         <div id="div2">2
32             <div id="div1">1</div>
33         </div>
34     </div>
35 </body>
36     <script>
37         var div3 = document.getElementById('div3');
38         div3.onclick = function(e){
39             //返回事件绑定的节点
40             console.log(e.currentTarget);
41             //返回触发节点
42             console.log(e.target);
43         }
44     </script>
45 </html>

1635488784595_事件委托.jpg

事件绑定在div3上， 点击div1，e.currentTarget返回绑定事件元素div3，e.target返回触发事件元素div1。

 

简单事件委托实现

功能：依次点击div1，div2，div3盒子变为红色。

 

<!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");
        // 点击事件绑定到div3
        div3.onclick = function(e){
            // 触发节点改变位红色
            e.target.style.background = "red";

        }
    </script>
</html>

1635488721744_事件委托.gif

 

来源：http://movies.itheima.com/news/20211029/133654.html

 

posted @ 2022-10-19 01:46  落晴鸢  阅读(65)  评论(0)  编辑  收藏  举报