This article describes in detail the events that have been loaded to a favorite page, binding and anti-binding event listeners, event triggers, and interactive processing of events. For more information, see, hope to help you
1. RESPONSE event after page loading
After a page is loaded, the DOM element is ready to be read and operated.
① $ (Doucument). ready () event in jQuery
Ready (fn) is the most important function in the jQuery event module. This method can be seen as an alternative to registering events with window. onload. By using this method, you can call the bound function immediately when the DOM is loaded, and almost all javaScript functions need to be executed at that moment.
Ready (fn) Return Value: Object parameter-fn: Parameter Function to be executed when the DOM is loaded. When the DOM is loaded, bind a Function to be executed.
And it has a very simple abbreviation form $ (document). ready (function () {}) =>$ (function (){})
② Window. onload () event and $ (document). ready () event comparison
Window. onload () = function (){}
If multiple window. onload () is used, only the last bound function can be executed, and it will overwrite all the previously bound window. onload () functions.
If you use multiple $ (), all of them can be executed.
Note that ifIf the onload event of the body tag has registered a function, the functions registered with the $ () event will not be executed.
2. Bind and unbind Event Listeners
① Bind events
(1) bind (type, [data], fn) Function
Is to bind a function with an event of an element $ ("# id "). click (function () {}) is to bind an anonymous function with the click event of the id element.
However, the above example is just an abbreviation, because it is a simple and common event binding, the formal writing should be as follows:
$ ("# Id"). bind ("click", [data], function (){})
Bind (type, [data], fn) Return Value: Object parameter-type: event type String data: optional, used as event. the data property value is passed to the real parameter Object fn of fn: The Function bound to the event.
(2) parameters passed for processing functions
The second parameter of the bind () function and the event. data Attribute are used to pass the fn function parameters.
The Code is as follows:
$ ("# Text2"). bind ("click", {first: "1", second: "2"}, function (event ){
If (event. data. first = "1") {$ (this). val ("welcome ")}
If (event. data. second = "1") {$ (this). val ("")}
});
})
The second parameter is a json object. In the fn function, the parameter value is obtained through the event. data key name.
(3) block default browser behavior
Sometimes the bind function conflicts with the default operations of the browser. To prevent the default operations of the browser, you only need to add a return false statement after fn;
The Code is as follows:
$ ("Form"). bind ("submit", function () {return false ;})
② Anti-binding event
Is to unbind a function from an event of an element.
Unbind ([type], [fn name]) Return Value: Object parameter-type: Event type String fn name: Function name to be unbound
The preceding two parameters are optional. If the parameter is null, the function is used to unbind all events of all matching elements.
The Code is as follows:
$ (Function () {$ ("# btn1"). click (function (){
$ ("Input [type = text]"). unbind ()})
})
Click btn1 to unbind all functions bound to the event in the type = text box.
③ One-time event binding
A function bound to an event of an element can only be executed once.
One (type, [data], fn) Return Value: Object parameter-type: event type String data: optional, used as event. the data property value is passed to the real parameter Object fn of fn: The Function bound to the event.
Use the same as the bind () function. The difference is that the fn in one can only be executed once.
3. event triggers
Some of the functions bound above can be executed only after you perform certain operations. For example, a function bound to a click event can be executed only when you click the corresponding element. However, the event trigger can use code to simulate the user's operation and then execute the function bound to the event, without the user performing some operations.
Trigger (type, [data]) Return Value: Object parameter-type: Event type String data: optional, the real parameter Array (which is a javascript Array) of the function bound to the event to trigger all functions bound to a certain event of the matched element, when this type of event conflicts with the default operations of the browser, the event trigger will execute the default operations of the browser.
The Code is as follows:
$ (Function () {$ ("# Text1"). bind ("click", function () {$ (this). val ("")})})
$ (Function () {$ ("# Text2"). click (function (event, pamas1, pamas2)
{$ (This). val ("trigger event trigger" + pamas1 + pamas2 )})
})
$ (Function () {$ ("input [type = text]"). trigger ("click", ["1", "2"])})
As shown in the above Code, although a function is bound to the Click Event of the two text boxes, the last Code also sets a trigger for the Click Event of the two text boxes, therefore, you do not need to click the corresponding text box to execute the functions bound to their click events. In addition, the trigger also transmits parameters for the function triggered by the trigger, which is a javascript Array and can be seen in the click function of Text2.
When the event triggered by the trigger function conflicts with the default operations of the browser, the trigger executes the default operations of the browser, while the triggerHandler function does not perform the default operations of the browser.
TriggerHandler (type, [data]) is consistent with trigger
4. Interactive Processing of events
① Hover: Imitating mouse hover
Hover (over, out) Return Value: Object parameter-over: Function triggered by moving the cursor over an element out: Function triggered by removing the cursor from an element
The Code is as follows:
Judge user input
$ (Function () {$ ("# hover1"). hover (function (){
$ ("# Hoverpd"). show () ;}, function (){
$ ("# Hoverpd"). hide ();})
})
② Toggle: the Loop Response of multiple clicks
Adds many binding functions to the Click Event of a matched element. These functions are cyclically executed as the element is continuously clicked.
Toggle (fn1, fn2, fn3. ..) Return Value: Function of the Object parameter-fn1, fn2, fn3. ..
The Code is as follows:
Var I = 0;
$ (Function () {$ ("# toggle1"). toggle (function () {I ++; $ ("# hover1"). val (I )},
Function () {I = I + 2; $ ("# hover1"). val (I )})
})
5. jQuery built-in event types
① JQuery built-in event functions are declared in two ways
Event functions without parameters-event type name () simulates user operations
Parameter-based event function-event type name (event function)
$ ("# Id"). click (function () {}) an event function with Parameters
$ ("# Id "). click (function () {}); $ ("# id "). click ();) event functions without parameters-if you do not click # id, the corresponding function is executed to simulate user operations.
② JQuery built-in Event Type Classification
(1) browser-related events
A function is triggered when an error occurs in the error (fn) Matching Element. There is no standard error event. If the image src is invalid, an error event is triggered.
A function is triggered after the load (fn) Matching Element is loaded. For example, window is triggered only after all DOM objects are loaded. Other single elements are triggered after a single element is loaded.
Unload (fn)
Resize (fn) triggers a function when the matching element changes.
Triggered when the scroll (fn) scroll bar changes
(2) form-related events
Change (fn) is triggered when the Matching Element loses focus, or after the element obtains focus.
Select (fn) is triggered when you select a text segment in the text box.
Triggered when submit (fn) submits a form
(3) events related to keyboard operations
Keydown (fn) triggered when the keyboard is pressed
When the keypress (fn) keyboard is pressed and popped up, the trigger sequence is keydown-> keyup-> keypress
Triggered when keyup (fn) is started
(4) mouse operation related events
The order of click (fn) is mousedown-> mouseup-> click
Mousedown (fn)
Mouseup (fn)
Dblclick (fn)
Mouseover (fn)
Mouseout (fn)
When mousemove (fn) is triggered when the matching element is moved, the event processing function is passed a variable-the event object (its clientX and clientY attributes represent the mouse coordinates)
Related events are displayed on the history page.
Triggered when the blue R (fn) Match element loses focus, that is, the Tab key can also be used by the mouse.
Focus (fn)
