java委托机制教程,一看就会的事件委托的讲解

事件委托

事件委托是将子元素的事件委托给父元素。

实现的机制

事件委托是基于事件冒泡而实现的。

事件冒泡

子元素的事件被触发，它会传递给父元素，父元素的事件也会被触发，一直到根节点，这一个过程叫事件冒泡。

示例1

简单至极的事件委托

html结构

• 1
• 2
• 3
• 4

复制代码

js代码

let ulDom = document.querySelector('ul')

ulDom.onclick = function (e) {

if (e.srcElement.nodeName.toLowerCase() === 'li') {

console.log('点击li元素')

}

}

复制代码

示例2

可应用于项目中的delegate的实现(注意处理一下浏览器兼容性)

/**

* @function 事件委托的实现

* @param parentDom dom对象

* @param childDoms 数组(元素是dom对象)

* @param eventType 事件类型

* @param callback 回调函数

*/

const delegate = function (parentDom, childDoms, eventType, callback) {

const isChildOf = (childDom, parentDom) => {

var parentNode

if (childDom && parentDom) {

parentNode = childDom.parentNode

while (parentNode) {

if (parentDom === parentNode) {

return true

}

parentNode = parentNode.parentNode

}

}

return false

}

parentDom.addEventListener(eventType, function (e) {

for (let i = 0; i < childDoms.length; i++) {

let parent = childDoms[i]

if (isChildOf(e.srcElement, parent)) {

if (typeof callback === 'function') {

callback()

}

}

}

}, false)

}

复制代码

谢谢阅读！

可加微信交流！

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[一看就会的事件委托的讲解]http://www.zyiz.net/tech/detail-132705.html