我无法区分的委托的用途是什么

$( "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). (与人类相比:如果不戳人也不能戳一个人的手臂.)当点击侦听器为父母触发时，该事件具有 target属性，该属性指示事件的原始目标是什么元素. 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. 这篇关于我无法区分的委托的用途是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！