欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

事件委托是什么?原理和用处解析

最编程 2024-08-07 13:50:54
...
什么是事件委托?

可以理解为给父元素注册事件,委托给子元素进行处理.

事件委托可以达到什么效果?

可以给‘动态新增’元素注册事件

事件委托的原理是什么?

原理就是事件冒泡
什么是事件冒泡:当触发子元素的事件时候,所有的父级元素‘同名事件’会被依次触发
它的触发规则是:子元素->父元素->body->html->document->window 依靠这个规则就可以实现事件委托,下面是代码:

image.png 如何删除表格里面的tr,注意这里的tr是动态新增的,所以无法直接注册点击事件

    /* 点击删除 : 删除是动态新增元素,需要注册委托事件
    事件委托 :  给父元素注册, 委托子元素处理
     * 父元素也不能是新增的,如果分不清楚,也可以直接给body注册
     
       e.target :a标签 删除按钮
       e.target.parentNode : td
       e.target.parentNode.parentNode : tr
   
    */

    //事件: 给父元素注册
    let tbody = document.querySelector('tbody')
    tbody.onclick = function (e) {
      console.log(e.target)
      //委托: 找到委托的子元素: 判断到底是不是删除按钮
      if (e.target.classList.contains('delete')) {

        document.querySelector('tbody').removeChild(e.target.parentNode.parentNode)
      }
    }

事件委托的注意点:

//委托: 找到委托的子元素: 判断到底是不是删除按钮 
if (e.target.classList.contains('delete')) 

不能用this:这里的this是指向的事件源(父元素),而需要使用e.target : 指向事件目标 (触发本次冒泡的子元素)

推荐阅读