bind binding events
. 1 the bind (type, Data, Fn) 2 Parameter Description . 3 type (String): event type . 4 Data (Object): (Optional) Additional data event.data as the property value passed to the event object . 5 Fn (Function ): bound to each element of the above matching event handler . 6 // pass the bind parameters are selected, the reception parameter e.data . 7 $ ( 'Button') the bind ( 'the Click', { 'a'.: 'B'}, Fn) . 8 function Fn (E) { . 9 the console.log (e.data) 10 the console.log (e.data.a) . 11 } 12 is 13 is $ ( 'Button'). the bind ( 'the Click' , Fn) 14 function Fn (E) { 15 the console.log ( 'Wahaha') 16 } . 17 18 is // event name as a shorthand method name . 19 $ ( 'Button') the Click. ({ 'A': 'B'}, Fn) 20 is function Fn (E) { 21 is the console.log (e.data) 22 is Console. log (e.data.a) 23 is } 24 25 $ ( 'Button'). the Click (Fn) 26 is function Fn (E) { 27 the console.log ( 'Wahaha') 28 }
Unbundling event
$ (Selector) .unbind (type, fn); Parameter Description] type (String): (optional) type of event fn (Function): (optional) from each event matched elements unbind event handler description 1. bind () is the reverse operation, the event from each of the matched elements to delete bindings. 2. If there are no parameters, all events bound is deleted. 3. If the handler passed when binding as the second parameter, only this specific event handlers will be deleted.
Common events
click (function () {...} ) // single event
blur (function () {...} ) // loses focus
focus (function () {...} ) // get the focus
change (function () {...}) // when the mouse leaves the input frame contents change trigger
keyup (function () {...} ) // press the keyboard 27 corresponding to the trigger event is esc to get the keyboard number e.keyCode
mouseover / mouseout // if the parent element is bound over to the event, then the parent element if there are sub-elements, each time into the sub-elements also trigger events over the parent element
mouseenter / mouseleave = hover (function ( ) {...} ) // mouse suspended
Event bubbling
If this object defines a handler for this event, the return trigger certain events (such as onclick event click) on an object If you do not define this event handler or event true, then this event will be the parent objects to the object spread, from the inside out, until it is processed (the parent object of all similar events will be activated), or it arrives at the target level of the top level, that is, the document object (some browser window).
1 <style> 2 .outer{ 3 width: 300px; 4 height: 300px; 5 background-color: red; 6 } 7 .inner{ 8 width: 100px; 9 height: 100px; 10 background-color: forestgreen; 11 } 12 </style> 13 14 <body> 15 <div class="outer"> 16 <div class="inner"></div> 17 </div> 18 </body> 19 20 <script> 21 $('.outer').click( 22 function () { 23 alert('outer') 24 }) 25 $ ( ' .inner ' ) .click ( 26 is function (E) { 27 Alert ( ' Inner ' ) 28 // e.stopPropagation () // event prevents bubbling method. 1 29 return to false // stop event bubbling method 2 30 }) 31 is </ Script >
Common organization of the event bubbling way
[A way] bubbling by returning false to cancel default behavior and prevent incidents.
举例：
$("form").bind("submit", function() { return false; })
[Two] way through event.preventDefault () method prevents the event bubbling
For example:
$("form").bind("submit", function(event){
event.stopPropagation();
});
Event delegates
Principle: using the principle of bubbling, the event is added to the parent, trigger the execution of the effect.
effect:
1. 2. better performance for the newly created element, can have a direct events
Event Source:
Like with this role (he does not see the point to question, who is who operated), under event object
Usage scenarios:
-
DOM bindings for the same event as many elements;
-
DOM event binding element does not yet exist;
grammar:
ON (Events, Selector, Data, Fn); Events (String): one or more spaces event type selector (String): a selector string, for filtering out the selected progeny element can trigger event elements data: when an event is triggered, event.data to be passed to the event handler. fn: callback function ****** Here we must note that, selector, this selector is put, not put jQuery object ******
Examples
. $ ( 'div') ON ( 'the Click', 'Button', { 'A': 'B'}, function (Event) {
the console.log (the event.data)
Alert ( "allowed point ')
})
rather delegate to the click event of button element to the parent element div
add in after the button click event can have
Page load
. 1 document.onload = function () { 2 // Code JS . 3 } . 4 the window.onload = function () { . 5 $ ( "Button"). The Click (function () { . 6 Alert ( "allowed point ') 7 }) 8 } 9 the onload have to wait until all the documents are added to the audio and video is finished before the trigger 10 the onload only binding once 11 12 // jQuery way, only to wait after the document is loaded can be performed, you can be on the same html page multi-use 13 is $ (document) .ready ( 14 function () { 15 // added after the completion of the document can do 16 }) . 17 18 is // jQuery manner (abbreviated) ***** . 19 $ (function () { 20 is // added after the completion of the document can do 21 }) 22 is 23 is // Example 24 $ (function () { 25 $ ( 'Button'). The Click (function () { 26 is alert ( 'allowed point') 27 }) 28 }) 29 30 // jQuery waiting all resources including audio and video have been loaded before the execution of the code function, can be used repeatedly 31 is $ (window) .ready ( 32 function () { 33 is Alert ( '123') 34 is })
each
each () method is defined as a function of a predetermined operation of each matching element.
jQuery each method is provided for all the parameters one by one sub-element method calls. And each method of the jQuery object is to provide a sub-elements within jQuery-by-call.
1 syntax structure 2 $ (Selector) .each (function (index, Element)) . 3 Examples . 4 < body > . 5 < UL > . 6 < Li > Option 1 </ Li > . 7 < Li > Option 2 </ Li > . 8 < Li > option 3 </ Li > . 9 </ UL > 10 </ body > . 11 < Script > 12 is $ ( 'at the' ) .Each ( 13 is function (ind, dom) { // active each index is transmitted ind, dom per one of the object tags 14 the console.log (ind, dom) 15 } 16 ) . 17 </ Script >