forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdelegate.xml
120 lines (117 loc) · 4.98 KB
/
delegate.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<?xml version="1.0"?>
<entry type="method" name="delegate" return="jQuery">
<title>.delegate()</title>
<desc>Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.</desc>
<signature>
<added>1.4.2</added>
<argument name="selector" type="String">
<desc>A selector to filter the elements that trigger the event.</desc>
</argument>
<argument name="eventType" type="String">
<desc>A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.</desc>
</argument>
<argument name="handler(eventObject)" type="Function">
<desc>A function to execute at the time the event is triggered.</desc>
</argument>
</signature>
<signature>
<added>1.4.2</added>
<argument name="selector" type="String">
<desc>A selector to filter the elements that trigger the event.</desc>
</argument>
<argument name="eventType" type="String">
<desc>A string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.</desc>
</argument>
<argument name="eventData" type="Object">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
<argument name="handler(eventObject)" type="Function">
<desc>A function to execute at the time the event is triggered.</desc>
</argument>
</signature>
<signature>
<added>1.4.3</added>
<argument name="selector" type="String">
<desc>A selector to filter the elements that trigger the event.</desc>
</argument>
<argument name="events" type="PlainObject">
<desc>A plain object of one or more event types and functions to execute for them.</desc>
</argument>
</signature>
<longdesc>
<p>As of jQuery 1.7, <code>.delegate()</code> has been superseded by the <a href="http://api.jquery.com/on">.on()</a> method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the <a href="http://api.jquery.com/on">.on()</a> method. In general, these are the equivalent templates for the two methods:</p>
<pre><code>
// jQuery 1.4.3+
$(elements).delegate( selector, events, data, handler );
// jQuery 1.7+
$(elements).on( events, selector, data, handler );
</code></pre>
<p>For example, the following <code>.delegate()</code> code:</p>
<pre><code>$("table").delegate("td", "click", function() {
$(this).toggleClass("chosen");
});</code></pre>
<p>is equivalent to the following code written using <code>.on()</code>:</p>
<pre><code>$("table").on("click", "td", function() {
$(this).toggleClass("chosen");
});</code></pre>
<p>To remove events attached with <code>delegate()</code>, see the <a href="http://api.jquery.com/undelegate">.undelegate()</a> method.</p>
<p>Passing and handling event data works the same way as it does for <code>.on()</code>.</p>
</longdesc>
<note id="propagation-for-live-or-delegate" type="additional"/>
<example>
<desc>Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.</desc>
<code><![CDATA[
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
]]></code>
<css><![CDATA[
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
]]></css>
<html><![CDATA[<p>Click me!</p>
<span></span>]]></html>
</example>
<example>
<desc>To display each paragraph's text in an alert box whenever it is clicked:</desc>
<code><![CDATA[$("body").delegate("p", "click", function(){
alert( $(this).text() );
});]]></code>
</example>
<example>
<desc>To cancel a default action and prevent it from bubbling up, return false:</desc>
<code><![CDATA[$("body").delegate("a", "click", function() { return false; })]]></code>
</example>
<example>
<desc>To cancel only the default action by using the preventDefault method.</desc>
<code><![CDATA[$("body").delegate("a", "click", function(event){
event.preventDefault();
});]]></code>
</example>
<example>
<desc>Can bind custom events too.</desc>
<code><![CDATA[
$("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
$(this).text("Hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
]]></code>
<css><![CDATA[
p { color:red; }
span { color:blue; }
]]></css>
<html><![CDATA[<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>]]></html>
</example>
<category slug="events/event-handler-attachment"/>
<category slug="version/1.4.2"/>
<category slug="version/1.4.3"/>
</entry>