事件委托，也称为事件代理，是JavaScript中绑定事件的一种常用技术。也就是说，需要绑定到子元素的响应事件被委托给父元素或外部元素，以便外部元素承担事件监控的责任。本文将详细介绍JavaScript事件委托的用法，有需要的可以参考。
目录
介绍示例：事件委托编写1:事件委托编写2:每个子元素都绑定一个事件示例：新元素编写1:事件委托编写2:每个子元素都绑定一个事件。
简介
解释
本文通过实例介绍了事件的委托(代理)在JavaScript中的使用。
事件委托简介
事件委托，也称为事件代理，是JavaScript中绑定事件的一种常用技术。也就是说，需要绑定到子元素的响应事件被委托给父元素或外部元素，以便外部元素承担事件监控的责任。
代理的原理是DOM元素的事件冒泡。
事件委托的优势
1.节省内存并减少事件绑定
使用事件委托后，原本需要绑定到所有子元素的事件只需要一个事件绑定。
2.事件可以动态绑定，新添加的子对象事件可以由绑定的事件处理。
新添加的子对象生成的事件最终会冒泡到父元素中，以便可以处理它们。
示例：事件委托
需求：一个列表，当你点击列表元素时，它的内容会弹出。
写法1：事件委托
只需将事件绑定到外部元素。
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题这是标题/标题
/头
身体
ul id='id-ul '
李我是第一个李
李我是第二个李
李我是第三个李
/ul
脚本
设ul=document . getelementbyid(' id-ul ')；
ul.addEventListener('click '，函数(ev) {
alert(ev . target . innertext)；
})
/脚本
/body
/html
结果
写法2：每个子元素都绑定事件
每个子元素都绑定到一个事件。
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题这是标题/标题
/头
身体
ul id='id-ul '
李我是第一个李
李我是第二个李
李我是第三个李
/ul
脚本
let Li=document . query selector all(' # id-ul Li ')；
为(让李元素){
Li element . addevent listener(' click '，function (ev) {
alert(ev . target . innertext)；
});
}
/脚本
/body
/html
结果
示例：新增元素
要求：每次点击生成按钮，都会生成一个子列表元素。然后，每次你点击一个列表元素，它的内容就会弹出。
写法1：事件委托
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题这是标题/标题
/头
身体
ul id='id-ul '
li1/李
li2/李
/ul
按钮id='btn'click/button
脚本
设num=3；
let eUl=document . query selector(' # id-ul ')；
let eButton=document . query selector(' # BTN ')；
ebutton . addevent listener(' click '，function () {
let newLi=document . createelement(' Li ')；
eul . appendchild(newLi)；
newLi.innerText=num
})
eUl.addEventListener('click '，function (event) {
alert(event . target . innertext)；
})
/脚本
/body
/html
结果
正如您所看到的，原始元素和新创建元素的事件将被处理。
写法2：每个子元素都绑定事件
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题这是标题/标题
/头
身体
ul id='id-ul '
li1/李
li2/李
/ul
按钮id='btn'click/button
脚本
设num=3；
let eUl=document . query selector(' # id-ul ')；
let eButton=document . query selector(' # BTN ')；
let eLi=document . query selector all(' # id-ul Li ')；
ebutton . addevent listener(' click '，function () {
let newLi=document . createelement(' Li ')；
eul . appendchild(newLi)；
newLi.innerText=num
})
为(让eLiElement of eLi) {
elielement . addevent listener(' click '，function (event) {
alert(event . target . innertext)；
})
}
/脚本
/body
/html
结果
可以看到，原有元素的点击事件会被处理，而新增的不会被处理。
关于JavaScript事件的委托(代理)用法示例的文章到此结束。有关JavaScript事件委托的更多相关内容，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。