JS 事件委托的概念和作用

╰+攻爆jí腚メ 2023-06-08 06:43 80阅读 0赞

相关文章：[jQuery事件委托][jQuery]

## **一、事件委托的作用：** ##

*  1.支持为同一个DOM元素注册多个同类型事件
 *  2.可将事件分成事件捕获和事件冒泡机制

**例子解析：**

*  **1.注册多事件**

用以往注册事件的方法,如果存在多个事件,后注册的事件会覆盖先注册的事件

<div id="div1"></div>
    
    <script> window.onload = function(){ let div1 = document.getElementById('div1'); div1.onclick = function(){ console.log('打印第一次') } div1.onclick = function(){ console.log('打印第二次') //只打印这个 } } </script>

用addEventListener(type,listener,useCapture)可以实现注册多个同类型事件

*  type: 必须,String类型,事件类型
 *  listener: 必须,函数体或者JS方法
 *  useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段

<div id="div1"></div>
    
    <script> window.onload = function(){ let div1 = document.getElementById('div1'); div1.addEventListener('click',function(){ console.log('打印第一次') //成功打印 }) div1.addEventListener('click',function(){ console.log('打印第二次') //成功打印 }) } </script>

*  **2.事件捕获和事件冒泡机制**
 *  事件捕获：当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
 *  事件冒泡：当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]

//当useCapture为默认false时,为事件冒泡
    <body>
        <div id="div1"></div>
    </body>
    
    <script> window.onload = function(){ let body = document.querySelector('body'); let div1 = document.getElementById('div1'); body.addEventListener('click',function(){ console.log('打印body') }) div1.addEventListener('click',function(){ console.log('打印div1') }) } //结果:打印div1 打印body </script>

*当为事件捕获(useCapture:true)时,先执行body的事件,再执行div的事件  
当为事件冒泡(useCapture:false)时,先执行div的事件,再执行body的事件*

## **二、事件委托和新增节点绑定事件的关系：** ##

**事件委托的优点：**

*  1.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
 *  2.动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

<body>
    	<div id="div">
    	    <div class="div1">div1</div>
    	    <div class="div2">div2</div>
    	</div>
    </body>
    
    <script> window.onload = function(){ let div = document.getElementById('div'); div.addEventListener('click',function(e){ console.log(e.target) }) let div3 = document.createElement('div'); div3.setAttribute('class','div3') div3.innerHTML = 'div3'; div.appendChild(div3) } </script>

虽然没有给div1和div2添加点击事件,但是无论是点击div1还是div2,都会打印当前节点。因为其父级绑定了点击事件,点击div1后冒泡上去的时候,执行父级的事件,这样无论后代新增了多少个节点,一样具有这个点击事件的功能

[jQuery]: https://blog.csdn.net/HuangsTing/article/details/102605725
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: /images/20230531/bbf7abeb11ec4003804f4434b81b55bc.png