Examples of methods and means jQuery convenient way directly by the method of operation of the link, by calling a method (a method of the underlying presentation) on $ .event achieved, commonly used as follows:
- on (types, selector, data, fn, one); bind one or more types of event listener function of the set of matched elements each element
- types; Event type string, between a plurality of event types separated by spaces
- selector; optional selector expression is a string used to bind the agent event.
- Data; passed to the event listener custom data function, may be of any type.
- fn; to be bound listener function
- one; the event is executed only once, as a method .one () support
writer by: Desert QQ: 22969969
- off (types, selector, fn); removing matches one or more type of binding elements listener function on each element of the following parameters:
- types; one or more space-separated event types and optional namespaces
- selector; optional selector expression string, used to remove the agent event
- Fn; listening function to be removed, can be set to false, indicating that only returns false internally defined function
- off (types, selector, fn); removal of one or more types of binding elements match each listener function element
- types; one or more space-separated event types and optional namespaces
- selector; optional selector expression string, used to remove the agent event
- Fn; listening function to be removed may be set to false
- bind (types, data, fn); Bind a common event
- trigger (type, data) function to bind to monitor the implementation of each element and matching the default behavior, and process simulation bubble
- one (types, selector, data, fn); matching elements in the collection of the most performed once for each element binding event listener function
- hover (fnOver, fnOut); one or two listeners for binding functions on the mating element when the mouse pointer enters and exits, the listener function is executed bound
We still have more than one instance of an example, the redrafting by an instance method, as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style>div{width: 200px;padding-top:50px;height: 150px;background: #ced;}div button{margin:0 auto;display: block;}</style> </head> <body> <div> <button id="button">按钮1</button> </div> <script> $("div").on('click',()=>console.log('div ordinary click event ' )); $ ( ' div ' ) .on ( ' the Click ' , ' the Button ' , () => console.log ( ' d1 agent event ' )) </ Script > </ body > < / HTML >
Render as follows:
And the last section, we bind a common event and agency event on div, triggering an ordinary event when clicked div, respectively, triggering an ordinary event and agent event click the button.
In addition to using the event becomes more square, jQuery also defines a number of events convenient method can be called directly on jQuery instance, attention: convenient method does not bind the agent event, can only bind ordinary event , all convenient method is as follows:
blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu
We will look to rewrite the above example, a convenient method to achieve, as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style>div{width: 200px;padding-top:50px;height: 150px;background: #ced;}div button{margin:0 auto;display: block;}</style> </head> <body> <div> <button id="button">按钮1</button> </div> <script> $("div").click(()=>console.log('div普通单击事件')); // with convenient event to achieve $ ( ' div ' ) .on ( ' the Click ' , ' the Button ' , () => console.log ( ' d1 agent event ' )) // proxy event can not be easy method to operate, we use an example method to implement </ Script > </ body > </ HTML >
And the effect is the same as above.
Source code analysis
Examples of the method are defined on jQuery.fn, the ON determination to do some major parameters, call a method to support multiple formats, to achieve the following:
jQuery.fn.extend ({ ON: function (types, Selector, Data, Fn, / * . INTERNAL * / One) { // This method is mainly for the correction parameter for each matching element in the set of one or more binding elements. types of event listener function. var origFn, type; // types CAN bE a Map of types / types handlers // If the object is that the parameter format .on (Object, selector, data, one) , or .one ( Object, data, one) of the IF ( typeof types === "Object" ) { // (Object-types, Selector, Data) IF ( typeof Selector! == "String" ) { // (Object-types, Data ) Data =Selector; Selector = undefined; } for (type in types) { // iterate parameter types, recursively calling the method .on (types, selector, data, fn, one) binding event. the this .on (type, Selector, Data, types [type], One); } return the this ; } IF (Data == null && Fn == null ) { // If there is no argument 3,4, considered format Yes. ON (types, Fn) // (types, Fn) Fn = Selector; //The second parameter is corrected to fn. Selector = = Data undefined; } the else IF (Fn == null ) { // passed parameters when three IF ( typeof Selector === "String") { // If the second parameter is a string, it is considered the format is: .on (types, selector, fn ) is ignored parameter data, and the third parameter as a parameter fn. // (types, Selector, Fn) Fn = Data; Data = undefined; } the else { //Otherwise, it is considered ignored parameter selector, and while the first argument as a parameter data, and the third parameter as an argument fn. Format is .on (types, Data, fn) // (types, Data, fn) fn = Data; Data = Selector; Selector = undefined; } } IF (fn === to false ) { // If the Boolean parameter fn value false, it is corrected to always put the function returns false returnFalse (). = fn returnFalse; } the else IF (fn!) { // If no value is returned directly fn. return the this ; } IF (One === 1) { // when Method One () call .on (), this parameter is 1, the monitor function fn will reseal only once a new listener function. = origFn Fn; Fn = function (Event) { // Can use SET AN empty, the contains The Event info Operating since the jQuery () OFF (Event);. return origFn.apply ( the this , arguments); }; // the Use Same GUID Remove the using Caller CAN origFn SO fn.guid origFn.guid = || (origFn.guid = jQuery.guid ++ ); } return the this .each (function () { // iterate current the this jQuery.event.add ( the this , types, Fn, Data, Selector); // call to add () event binding }); }, One: function (types, Selector, Data , Fn) { // match each set of elements of one or more types of binding event listener function, each listening function is executed at most once on each of the matching element. This simple method is achieved by calling .on (types, selector, data, fn, one). return the this .on.call ( the this , types, Selector, Data, Fn,. 1 ); }, / * skip * / })
For convenient method, he is defined on $ .fn each attribute value is a function, internal call or to achieve $ .fn.on add an event, as follows:
jQuery.each (( "Blur Focus focusIn focusOut Load the unload a resize the Click DblClick Scroll" +
"mouseDown mouseUp mouseMove mouseOver mouseOut MouseEnter MouseLeave" +
"SELECT Change contextMenu Submit keyDown KeyPress keyUp error"). Split ( ""), function (I, name) { // parameter 1 parameter 2 is an array is a function which is the value of name, such as Blur, Focus
// the Handle event Binding
the jQuery.fn [name] = function (Data, Fn) { // initialization event convenient method, in jQuery.fn additive element on the object, so jQuery instance can directly access the
IF (fn == null ) { // correction parameter, if only pass a parameter fn put parameter as the parameter, the data deemed null
fn = Data;
data= Null ;
}
return arguments.length> 0? // number of parameters that determine the binding event or trigger events based on
the this .on (name, null , the Data, the Fn): // if the number is greater than 1, then call the method .on () event listener function to bind
the this .trigger (name); // If there are no parameters, then call the method .trigger () function to trigger the event listener and the default behavior
};
IF (jQuery.attrFn) { // log events convenient method name, when calling jQuery.attr () to read or set the HTML attribute, method of the same name and attribute name event if convenient, the event will be convenient to call a method of the same name
jQuery.attrFn [name] = to true ;
}
( rkeyEvent.test (name)) { if
jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
}
if ( rmouseEvent.test( name ) ) {
jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
}
});
We can see, do not pass parameters that will trigger the event if you execute convenient method, for example: $ ( 'div') click () event will fire in the ordinary div binding.