什么是DOM事件委托？
有人能解释一下JavaScript中的事件委托吗?它有什么用处？
回答 6
Stack Overflow用户
发布于 2015-10-08 20:31:41
事件委派允许您避免将事件侦听器添加到特定节点；而是将事件侦听器添加到一个父级。该事件侦听器分析冒泡事件以查找与子元素匹配的事件。
JavaScript示例：
假设我们有一个带有几个子元素的父UL元素：
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>我们还可以说，当每个子元素被单击时，需要发生一些事情。您可以为每个单独的LI元素添加一个单独的事件侦听器，但是如果经常从列表中添加和删除LI元素怎么办？添加和删除事件侦听器将是一场噩梦，特别是当添加和删除代码位于应用程序中的不同位置时。更好的解决方案是向父UL元素添加事件侦听器。但是，如果您将事件侦听器添加到父元素，您如何知道哪个元素被单击了？
简单:当事件冒泡到UL元素时，检查事件对象的target属性以获得对实际单击的节点的引用。下面是一个非常基本的JavaScript代码片段，它演示了事件委托：
// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
// List item found! Output the ID!
console.log("List item ", e.target.id.replace("post-"), " was clicked!");
}
});首先，向父元素添加一个单击事件侦听器。当事件侦听器被触发时，检查event元素以确保它是要反应的元素类型。如果是安莉元素，轰隆:我们有我们需要的东西！如果它不是我们想要的元素，则可以忽略该事件。这个例子非常简单-- UL和LI是一个简单的比较。让我们尝试一些更难的东西。让我们有一个有很多孩子的父DIV，但我们所关心的只是一个带有classA CSS类的A标记：
// Get the parent DIV, add click listener...
document.getElementById("myDiv").addEventListener("click",function(e) {
// e.target was the clicked element
if(e.target && e.target.nodeName == "A") {
// Get the CSS classes
var classes = e.target.className.split(" ");
// Search for the CSS class!
if(classes) {
// For every CSS class the element has...
for(var x = 0; x < classes.length; x++) {
// If it has the CSS class we want...
if(classes[x] == "classA") {
// Bingo!
console.log("Anchor element clicked!");
// Now do something here....
}
}
}
}
});Stack Overflow用户
发布于 2014-01-01 15:29:00
委派概念
如果在一个父元素中有许多元素，并且您想要处理其中的事件-不要将处理程序绑定到每个元素。相反，将单个处理程序绑定到其父处理程序，并从event.target获取该子处理程序。该站点提供了有关如何实现事件委派的有用信息。http://javascript.info/tutorial/event-delegation
Stack Overflow用户
发布于 2009-11-06 20:40:44
Delegation是一种技术，在这种技术中，对象向外表达某些行为，但实际上将实现该行为的责任委托给相关对象。乍一听，这与代理模式非常相似，但它的用途却大不相同。委托是一种将对象(方法)行为集中起来的抽象机制。
一般而言:使用委托作为继承的替代方案。继承是一种很好的策略，当父对象和子对象之间存在密切关系时，继承可以非常紧密地耦合对象。通常，委托是表达类之间关系的更灵活的方式。
这种模式也称为“代理链”。其他几种设计模式使用委托--状态、策略和访问者模式依赖于它。
https://stackoverflow.com/questions/1687296
复制相似问题