我无法区分的委托的用途是什么 [英] what is use of delegate that I am not able to distinguish

问题描述

在Jquery的委托"上，我无法理解此委派事件，对此有任何帮助吗?

我该怎么用，

案例1

$( "table td" ).on( "click", function() {
  $( this ).toggleClass( "chosen" );
});

案例2

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

两者都会做同样的事情.如果是这样，主要区别是什么?[我听不懂].与事件冒泡"有什么关系吗?请

解决方案

实际的区别在于delegate(和三个参数on)可以使侦听器应用于尚不存在的元素.

$( "table td" ).on( "click", ...)会将侦听器附加到与在调用时存在的选择器中的table td选择器匹配的每个元素上.如果在呼叫后将td添加到页面，则不会在其上附加侦听器.

$( "table" ).delegate( "td", "click", ...)将一个侦听器附加到调用时存在的每个table上，并且仅在单击该table元素的td子元素时才会触发该侦听器.

 $("button").click(function() {
  $("tr").append("<td>I am added after page-load time and am not targeted by load-time scripts. The listener that fires an alert does not apply to me, because I didn't exist when the <code>$('table td').click</code> code ran. However, the delegated listener still aplies, so I will turn red when you click me.</td>");
})

$("table td").on("click", function() { alert("hi"); });

$("table").delegate("td", "click", function() { $(this).css("color", "red"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:70%";>
  <tr>
    <td>I am targeted by non-delegated event listeners set at page-load time. Click this text to trun this text red and see an alert.</td>
  </tr>
</table>
<button>Add another td</button> 

委派之所以起作用，是因为当您单击子元素(例如td)时，您实际上还单击了它的所有父元素(例如table和body). (与人类相比:如果不戳人也不能戳一个人的手臂.)当点击侦听器为父母触发时，该事件具有

 document.getElementById("theDiv").addEventListener("click", function(e) {
  if(e.target != this) {
      e.target.style.color = "red";
  }
}); 

 <div id="theDiv">
  <span>I'm a span, inside of a div</span><br/>
  <span>I'm another span, inside of a div</span><br/>
  <span>I'm a third span, inside of a div</span>
</div> 

在此示例中，请注意，我们在<div>上仅添加了一个侦听器.当我们单击<span>时，click事件也适用于父级<div>.我们使用event.target允许<div>侦听器找出单击了哪个子项.

On Jquery 'delegation', I am not able to understand this delegating events, Any help on this?

what if i use,

case 1

$( "table td" ).on( "click", function() {
  $( this ).toggleClass( "chosen" );
});

case 2

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

Both will do the same job. If so, what is the main difference?[I am not able to understand]. Is anything related to 'Event Bubbling'? Please

解决方案

The practical difference is that delegate (and three-argument on) can cause listeners to apply to elements that don't exist yet.

$( "table td" ).on( "click", ...) attaches a listener to every element that matches the table td selector that exists at the time the call is made. If a td is added to the page after this call, it won't have a listener attached to it.

$( "table" ).delegate( "td", "click", ...) attaches a listener to every table that exists at the time the call is made, and that listener only fires when a td sub-element of that table element is clicked.

$("button").click(function() {
  $("tr").append("<td>I am added after page-load time and am not targeted by load-time scripts. The listener that fires an alert does not apply to me, because I didn't exist when the <code>$('table td').click</code> code ran. However, the delegated listener still aplies, so I will turn red when you click me.</td>");
})

$("table td").on("click", function() { alert("hi"); });

$("table").delegate("td", "click", function() { $(this).css("color", "red"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:70%";>
  <tr>
    <td>I am targeted by non-delegated event listeners set at page-load time. Click this text to trun this text red and see an alert.</td>
  </tr>
</table>
<button>Add another td</button>

Delegation works because when you click a child element (like a td) you've actually clicked all of its parents (like a table and the body) as well. (To compare to human person: you can't poke a person's arm without also poking that person as a whole.) When a click listener fires for a parent, the event has a target property that indicates what element was the original target of the event.

document.getElementById("theDiv").addEventListener("click", function(e) {
  if(e.target != this) {
      e.target.style.color = "red";
  }
});

<div id="theDiv">
  <span>I'm a span, inside of a div</span><br/>
  <span>I'm another span, inside of a div</span><br/>
  <span>I'm a third span, inside of a div</span>
</div>

Note in this example, we add only one listener on the <div>. When we click a <span>, the click event also applies to the parent <div>. We use event.target to allow the <div> listener to find out which of its children was clicked.

这篇关于我无法区分的委托的用途是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！