什么是事件委托?事件委托的原理以及作用

您所在的位置：网站首页 › 委托事件模型的原理 › 什么是事件委托?事件委托的原理以及作用

什么是事件委托?事件委托的原理以及作用

#什么是事件委托?事件委托的原理以及作用| 来源: 网络整理| 查看: 265

什么是事件委托?

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

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

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

事件委托的原理是什么?

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

如何删除表格里面的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 : 指向事件目标 (触发本次冒泡的子元素)

【本文地址】

什么是事件委托?事件委托的原理以及作用

什么是事件委托?事件委托的原理以及作用

今日新闻

推荐新闻