blocks|key|1199186|text|Delegation是一种技术，在这种技术中，对象向外表达某些行为，但实际上将实现该行为的责任委托给相关对象。乍一听，这与代理模式非常相似，但它的用途却大不相同。委托是一种将对象(方法)行为集中起来的抽象机制。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1199187|一般而言:使用委托作为继承的替代方案。继承是一种很好的策略，当父对象和子对象之间存在密切关系时，继承可以非常紧密地耦合对象。通常，委托是表达类之间关系的更灵活的方式。|1199188|这种模式也称为“代理链”。其他几种设计模式使用委托--状态、策略和访问者模式依赖于它。|1199189|entityMap|0|LINK|mutability|MUTABLE|url|http://best-practice-software-engineering.ifs.tuwien.ac.at/patterns/delegation.html^0|0|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<a href="http://best-practice-software-engineering.ifs.tuwien.ac.at/patterns/delegation.html" rel="noreferrer">Delegation</a> is a technique where an object expresses certain behavior to the outside but in reality delegates responsibility for implementing that behaviour to an associated object. This sounds at first very similar to the proxy pattern, but it serves a much different purpose. Delegation is an abstraction mechanism which centralizes object (method) behavior.

Generally spoken: use delegation as alternative to inheritance. Inheritance is a good strategy, when a close relationship exist in between parent and child object, however, inheritance couples objects very closely. Often, delegation is the more flexible way to express a relationship between classes.

This pattern is also known as "proxy chains". Several other design patterns use delegation - the State, Strategy and Visitor Patterns depend on it.

blocks|key|1199242|text|C#中的委托类似于C或C%2B%2B中的函数指针。使用委托允许程序员将对方法的引用封装在委托对象中。然后，可以将委托对象传递给可以调用所引用方法的代码，而不必在编译时知道将调用哪个方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1199243|请参阅此链接-->+http://www.akadia.com/services/dotnet_delegates_and_events.html|offset|length|1199244|entityMap|0|LINK|mutability|MUTABLE|url|http://www.akadia.com/services/dotnet_delegates_and_events.html^0|0|A|1R|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

A delegate in C# is similar to a function pointer in C or C++. Using a delegate allows the programmer to encapsulate a reference to a method inside a delegate object. The delegate object can then be passed to code which can call the referenced method, without having to know at compile time which method will be invoked. 

See this link --> <a href="http://www.akadia.com/services/dotnet_delegates_and_events.html" rel="nofollow noreferrer">http://www.akadia.com/services/dotnet_delegates_and_events.html</a>

blocks|key|1199284|text|委派概念|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1199285|如果在一个父元素中有许多元素，并且您想要处理其中的事件-不要将处理程序绑定到每个元素。相反，将单个处理程序绑定到其父处理程序，并从event.target获取该子处理程序。该站点提供了有关如何实现事件委派的有用信息。http://javascript.info/tutorial/event-delegation|offset|length|1199286|entityMap|0|LINK|mutability|MUTABLE|url|http://javascript.info/tutorial/event-delegation^0|0|30|1C|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<h3>The delegation concept</h3>
If there are many elements inside one parent, and you want to handle events on them of them - don’t bind handlers to each element.
Instead, bind the single handler to their parent, and get the child from event.target.
This site provides useful info about how to implement event delegation.
<a href="http://javascript.info/tutorial/event-delegation" rel="noreferrer">http://javascript.info/tutorial/event-delegation</a>

blocks|key|1414465|text|事件委派允许您避免将事件侦听器添加到特定节点；而是将事件侦听器添加到一个父级。该事件侦听器分析冒泡事件以查找与子元素匹配的事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1414466|JavaScript示例：|1414467|假设我们有一个带有几个子元素的父UL元素：|1414468|<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>|code-block|syntax|javascript|1414469|我们还可以说，当每个子元素被单击时，需要发生一些事情。您可以为每个单独的LI元素添加一个单独的事件侦听器，但是如果经常从列表中添加和删除LI元素怎么办？添加和删除事件侦听器将是一场噩梦，特别是当添加和删除代码位于应用程序中的不同位置时。更好的解决方案是向父UL元素添加事件侦听器。但是，如果您将事件侦听器添加到父元素，您如何知道哪个元素被单击了？|1414470|简单:当事件冒泡到UL元素时，检查事件对象的target属性以获得对实际单击的节点的引用。下面是一个非常基本的JavaScript代码片段，它演示了事件委托：|1414471|//+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!");
+++}
});|1414472|首先，向父元素添加一个单击事件侦听器。当事件侦听器被触发时，检查event元素以确保它是要反应的元素类型。如果是安莉元素，轰隆:我们有我们需要的东西！如果它不是我们想要的元素，则可以忽略该事件。这个例子非常简单--+UL和LI是一个简单的比较。让我们尝试一些更难的东西。让我们有一个有很多孩子的父DIV，但我们所关心的只是一个带有classA+CSS类的A标记：|1414473|//+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%2B%2B)+{
++++++++++++//+If+it+has+the+CSS+class+we+want...
++++++++++++if(classes[x]+==+"classA")+{
++++++++++++++++//+Bingo!
++++++++++++++++console.log("Anchor+element+clicked!");
++++++++++++++++//+Now+do+something+here....
++++++++++++}
++++++++}
++++}
++}
});|1414474|http://davidwalsh.name/event-delegate|offset|length|1414475|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|0|0|11|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|19|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|1B|8|@]|9|@]|A|$I|J]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@]|A|$]]|$1|S|3|T|5|H|7|1D|8|@]|9|@]|A|$I|J]]|$1|U|3|V|5|6|7|1E|8|@]|9|@$W|1F|X|1G|1|1H]]|A|$]]|$1|Y|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|V]]]]

Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.
JavaScript Example :
Let's say that we have a parent UL element with several child elements:
<pre><code>&lt;ul id=&quot;parent-list&quot;&gt;
 &lt;li id=&quot;post-1&quot;&gt;Item 1&lt;/li&gt;
 &lt;li id=&quot;post-2&quot;&gt;Item 2&lt;/li&gt;
 &lt;li id=&quot;post-3&quot;&gt;Item 3&lt;/li&gt;
 &lt;li id=&quot;post-4&quot;&gt;Item 4&lt;/li&gt;
 &lt;li id=&quot;post-5&quot;&gt;Item 5&lt;/li&gt;
 &lt;li id=&quot;post-6&quot;&gt;Item 6&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
Let's also say that something needs to happen when each child element is clicked. You could add a separate event listener to each individual LI element, but what if LI elements are frequently added and removed from the list? Adding and removing event listeners would be a nightmare, especially if addition and removal code is in different places within your app. The better solution is to add an event listener to the parent UL element. But if you add the event listener to the parent, how will you know which element was clicked?
Simple: when the event bubbles up to the UL element, you check the event object's target property to gain a reference to the actual clicked node. Here's a very basic JavaScript snippet which illustrates event delegation:
<pre><code>// Get the element, add a click listener...
document.getElementById(&quot;parent-list&quot;).addEventListener(&quot;click&quot;, function(e) {
 // e.target is the clicked element!
 // If it was a list item
 if(e.target &amp;&amp; e.target.nodeName == &quot;LI&quot;) {
 // List item found! Output the ID!
 console.log(&quot;List item &quot;, e.target.id.replace(&quot;post-&quot;), &quot; was clicked!&quot;);
 }
});
</code></pre>
Start by adding a click event listener to the parent element. When the event listener is triggered, check the event element to ensure it's the type of element to react to. If it is an LI element, boom: we have what we need! If it's not an element that we want, the event can be ignored. This example is pretty simple -- UL and LI is a straight-forward comparison. Let's try something more difficult. Let's have a parent DIV with many children but all we care about is an A tag with the classA CSS class:
<pre><code>// Get the parent DIV, add click listener...
document.getElementById(&quot;myDiv&quot;).addEventListener(&quot;click&quot;,function(e) {
// e.target was the clicked element
 if(e.target &amp;&amp; e.target.nodeName == &quot;A&quot;) {
 // Get the CSS classes
 var classes = e.target.className.split(&quot; &quot;);
 // Search for the CSS class!
 if(classes) {
 // For every CSS class the element has...
 for(var x = 0; x &lt; classes.length; x++) {
 // If it has the CSS class we want...
 if(classes[x] == &quot;classA&quot;) {
 // Bingo!
 console.log(&quot;Anchor element clicked!&quot;);
 // Now do something here....
 }
 }
 }
 }
});
</code></pre>
<a href="http://davidwalsh.name/event-delegate" rel="noreferrer">http://davidwalsh.name/event-delegate</a>

blocks|key|1414603|text|它基本上是如何与元素进行关联的。.click适用于当前的DOM，而.on+(使用委托)将继续对事件关联后添加到DOM的新元素有效。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1414604|使用哪个更好，我会说这取决于具体情况。|1414605|示例：|1414606|<ul+id="todo">
  +<li>Do+1</li>
  +<li>Do+2</li>
  +<li>Do+3</li>
  +<li>Do+4</li>
</ul>|code-block|syntax|javascript|1414607|.Click事件：|1414608|$("li").click(function+()+{
  +$(this).remove+();
});|1414609|事件.on：|1414610|$("#todo").on("click",+"li",+function+()+{
  +$(this).remove();
});|1414611|请注意，我已经在.on中分隔了选择器。我会解释为什么。|1414612|让我们假设在此关联之后，让我们执行以下操作：|1414613|$("#todo").append("<li>Do+5</li>");|1414614|这就是你会注意到区别的地方。|1414615|如果事件是通过.click关联的，则任务5将不服从单击事件，因此不会将其删除。|1414616|如果它是通过.on关联的，并且选择器是分开的，那么它就会服从。|1414617|entityMap^0|G|6|X|3|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1H|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1J|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1K|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|1L|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1N|8|@]|D|@]|E|$]]|$1|10|3|11|5|L|7|1O|8|@]|D|@]|E|$M|N]]|$1|12|3|13|5|6|7|1P|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|1R|8|@]|D|@]|E|$]]|$1|18|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|19|$]]

It's basically how association is made to the element. <code>.click</code> applies to the current DOM, while <code>.on</code> (using delegation) will continue to be valid for new elements added to the DOM after event association.

Which is better to use, I'd say it depends on the case.

Example:

<pre><code>&lt;ul id="todo"&gt;
   &lt;li&gt;Do 1&lt;/li&gt;
   &lt;li&gt;Do 2&lt;/li&gt;
   &lt;li&gt;Do 3&lt;/li&gt;
   &lt;li&gt;Do 4&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

.Click Event:

<pre><code>$("li").click(function () {
   $(this).remove ();
});
</code></pre>

Event .on:

<pre><code>$("#todo").on("click", "li", function () {
   $(this).remove();
});
</code></pre>

Note that I've separated the selector in the .on. I'll explain why.

Let us suppose that after this association, let us do the following:

<pre><code>$("#todo").append("&lt;li&gt;Do 5&lt;/li&gt;");
</code></pre>

That is where you will notice the difference.

If the event was associated via .click, task 5 will not obey the click event, and so it will not be removed.

If it was associated via .on, with the selector separate, it will obey.

blocks|key|1414693|text|事件委派利用了JavaScript事件的两个经常被忽视的特性:事件冒泡和目标element.When在元素上触发事件，例如鼠标单击按钮，相同的事件也会在该元素的所有祖先上触发。此过程称为事件冒泡；事件从原始元素向上冒泡到DOM树的顶部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1414694|想象一下，一个有10列100行的HTML表，当用户单击表格单元格时，您希望发生一些事情。例如，我曾经必须在单击时使该大小的表格中的每个单元格都可编辑。向1000个单元中的每个单元添加事件处理程序将是一个主要的性能问题，并且可能是浏览器崩溃内存泄漏的来源。相反，使用事件委派时，您只需向table元素添加一个事件处理程序，截获click事件并确定单击了哪个单元格。|1414695|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Event delegation makes use of two often overlooked features of JavaScript events: event bubbling and the target element.When an event is triggered on an element, for example a mouse click on a button, the same event is also triggered on all of that element’s ancestors. This process is known as event bubbling; the event bubbles up from the originating element to the top of the DOM tree.

Imagine an HTML table with 10 columns and 100 rows in which you want something to happen when the user clicks on a table cell. For example, I once had to make each cell of a table of that size editable when clicked. Adding event handlers to each of the 1000 cells would be a major performance problem and, potentially, a source of browser-crashing memory leaks. Instead, using event delegation, you would add only one event handler to the table element, intercept the click event and determine which cell was clicked.

Can anyone please explain event delegation in JavaScript and how is it useful?

What is DOM Event delegation?

有人能解释一下JavaScript中的事件委托吗?它有什么用处？

问什么是DOM事件委托？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是DOM事件委托？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是DOM事件委托？
EN