html _ $。on_bind_delegate_live.html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html _ $。on_bind_delegate_live.html相关的知识，希望对你有一定的参考价值。
The bind() method and how it works
Syntax: .bind( eventType [, eventData ], handler(eventObject) )
It binds an event to an element. The event type is for example click, dblclick, mouseenter and so on. Event data is the data you want to pass to the handler. Handler is the event handler code. This method basically searches for all the elements and binds the same handler to all the matches found. Now take a closer look at all the elements found and same handler words. It is not a problem if the matched elements are only a few but the devil comes when the match goes to 3000 or more elements. Another problem is that the same handler code is used on all the handlers. That’s pretty inefficient. Even worse is when you deal with dynamic DOM manipulation like adding new elements. In that case the bind will not work because when bind scans the DOM tree the element must be present in the tree otherwise the handler will not be applied. But apart from the preceding disadvantages it also has some advantages like simple syntax, easy to use and it’s shorthand like click(), dblclick() and so on makes the task of adding an event handler much easier. One more thing is that if the element is removed or replaced then the handler is also. That is pretty useful in the case of Ajax calls.
The live() method and how it works
That method is deprecated now. But it is still useful for the “on()” method. “on()” is a new addition to the jQuery API. It can mimic the functionality of all the preceding three methods by varying its parameters. The advantage of using live() is it uses the concept of event bubbling. Every event is attached to the document itself and whenever that event occurs the event is passed to the top and at the top the event element selector and the event type are compared; if they match then the handler for that event is executed. It can also respond to the events that are generated by the dynamically added elements. The problem with the live is that it cannot support chaining events. Before calling the live element the jQuery needs to identify the element, and that is a time-consuming for large documents. It also does not respond to the stopPropogation() method called by the lower level element handlers because the event bubble is already at the top. It also does not respect the other event handler methods, such as document.unbind(‘click’) removes all click events added by the live() method call. The reason for this is quite simple. Because unbind() can’t differentiate between the click events added by the live() method on the document and by the bind() method.
The delegate() method and how it works
Syntax: .delegate( selector, eventType, handler(eventObject) )
selector
A selector to filter the elements that trigger the event.
eventType
A string containing one or more space-separated JavaScript event types, such as “click” or “keydown,” or custom event names.
handler(eventObject)
A function to execute at the time the event is triggered.
The delegate() method is quite similar to live() but in this you can control on which node the events will be added. Both functions make use of the event bubbling. Internally it also uses the live() method. The only difference is it catches fewer bubbles compared to live() and is closer to the original source of the event. It can also respond to dynamic element events. The only thing that makes apparent mark for choosing between live() and this is the root node. If your document contains some parent node that you think will not be replaced then use this otherwise live() will be good.
Have a look at following code:
Collapse | Copy Code
<html>
<body>
<div id=”ItemContainer”> <——- This node can be used for delegation event handling
<!–item list Here –>
<p></p>
<p></p>
<p></p>
…So on
</div>
</body>
</html>
Here if you want to add a click event on the “p” tag then it is better to use the delegation at “itemContainer”.
Check this code now:
Collapse | Copy Code
<html>
<body>
<!–item list Here –>
<p></p>
<p></p>
<p></p>
…So on
</div>
</body>
</html>
Now if you don’t have any parent node then delegation won’t work. For this type of situation it’s better to use “live()”. Or, to avoid the live() you can group your elements and then delegation can be used.
The click() Method and how it works
The syntax for click() is quite similar to bind() , the only difference is the event type is not required.
Syntax: .click( handler(eventObject) )
click() has the same disadvantages and advantages as bind(). The click event can be removed by the use of either unbind() or by removing the element itself. The click() event is directly bound to DOM elements so selectors don’t matter as the opposite of live().
The trigger() Method and how it works
Syntax: .trigger( eventType [, extraParameters ] )
Event handlers that are attached to any element can be fired either by the user or by script itself. To fire the event from script we use “trigger()”. It executes all the events in the order they are bound. Take this example:
Collapse | Copy Code
$(‘#foo’).on(‘click’, function () {
alert($(this).text());
});
$(‘#foo’).trigger(‘click’);
The code above will execute the click event without taking any input from the user. It does not provide the same event object as that of the user.
The triggerHandler() and how it works
Syntax: .triggerHandler( eventType [, extraParameters ] )
Sometime it is necessary we need to execute the event handler code only, without firing the actual event. For those cases we use this method. It executes the event handler code and prevents the default event from firing. For example in the case of a form you might want to validate the form without submitting it.
Summary
All Done. Now its time to review what we have learned so far. We learned about bind(), use it if you have only a few elements. live() is no more. click() is easy for individual elements. We learned how grouping of elements is important for delegate(). We have seen how to mimic the user click using trigger() and triggerHandler(). Using the preceding event handling methods in a proper way will increase the response of your website towards user interaction. So choose them wisely./*
$.on是绑定listener到bubble phase的，jquery没有办法绑定到capture phase（？）。
$.on(parent,selector,listener)将listener绑定到parent上，如果event的target满足selector，
则触发listener。
因此，如果一个dom元素同时使用了live和on（即上述两种方式），则后者的listener会在前者之前被执行。
*//* The jQuery .bind(), .live(), and .delegate() methods are just one
line pass throughs to the new jQuery 1.7 .on() method */
// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
// Live
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );/* The .live() method attaches the event handler to the root level
document along with the associated selector and event information
( "#members li a" & "click" ) */
$( "#members li a" ).live( "click", function( e ) {} );// ... more code ...
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
return arguments.length == 1 ?
this.off( selector, "**" ) :
this.off( types, selector, fn );
},
// ... more code ...
/* The .delegate() method behaves in a similar fashion to the .live()
method, but instead of attaching the event handler to the document,
you can choose where it is anchored ( "#members" ). The selector
and event information ( "li a" & "click" ) will be attached to the
"#members" element. */
$( "#members" ).delegate( "li a", "click", function( e ) {} );/* The .bind() method attaches the event handler directly to the DOM
element in question ( "#members li a" ). The .click() method is
just a shorthand way to write the .bind() method. */
$( "#members li a" ).bind( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} ); <ul id="members" data-role="listview" data-filter="true">
<!-- ... more list items ... -->
<li>
<a href="detail.html?id=10">
<h3>John Resig</h3>
<p><strong>jQuery Core Lead</strong></p>
<p>Boston, United States</p>
</a>
</li>
<!-- ... more list items ... -->
</ul>以上是关于html _ $。on_bind_delegate_live.html的主要内容，如果未能解决你的问题，请参考以下文章
html IF_04_19_Actionsheet_HTML
html IF_04_17_AlertController_HTML