forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdelegate.xml
152 lines (151 loc) · 5.24 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<?xml version="1.0"?>
<entry type="method" name="delegate" return="jQuery" deprecated="3.0">
<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" type="Function">
<desc>A function to execute at the time the event is triggered.</desc>
<argument name="eventObject" type="Event" />
</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="Anything">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
<argument name="handler" type="Function">
<desc>A function to execute at the time the event is triggered.</desc>
<argument name="eventObject" type="Event" />
</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 3.0, <code>.delegate()</code> has been deprecated. It was superseded by the <a href="/on/"><code>.on()</code></a> method since jQuery 1.7, so its use was already discouraged. 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="/on/"><code>.on()</code></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="/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" ).on( "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"/>
<category slug="deprecated/deprecated-3.0"/>
</entry>