1. Page load Complete Response event
When the page is loaded, it means that the DOM element is loaded and ready to be read and manipulated.
$ (doucument) in ①jquery. Ready () Event
Ready (FN) is one of the most important functions in the jquery event module. This method can be seen as an alternative to window.onload registration events. 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 execute when DOM is loaded ready bind a function to execute when the DOM is ready to load
And it has a very simple abbreviated form $ (document). Ready (function () {}) => $ (function () {})
②window.onload () event and $ (document). Comparison of Ready () events
Window.onload () =function () {}
If multiple window.onload () is used, only the last bound function can be executed, and it overrides all previous window.onload ()-bound functions.
If more than $ () is used, they can all be executed.
Note that if the OnLoad event for the <body onload> body tag has already registered a function, the $ () event registered function will not be executed
2. Binding and bound event listeners
① Binding Events
⑴bind (TYPE,[DATA],FN) function
is to bind a function together with an event of an element $ ("#id"). Click (function () {}) is to bind an anonymous function to the click event of an ID element
But the above example is simply abbreviated, because it is a simple and commonly used event binding, the formal writing should read as follows:
$ ("#id"). Bind ("click", [Data],function () {})
Bind (TYPE,[DATA],FN) return value: Object parameter-type: Event type String data: Optional, passed as the Event.data property value to the following FN argument Object fn: function functions bound to the event
⑵ pass arguments to a handler function
This uses the second parameter of the BIND () function and the Event.data property to pass the argument to the FN function
Copy Code code as follows:
<input id= "Text2" type= "text"/>
$ ("#Text2"). Bind ("click", {"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 that gets the parameter value through the Event.data through the key in the FN function
⑶ prevents browser from default behavior
Sometimes a bind-bound function conflicts with the browser's default operation, and if you want to block the browser's default action, simply add a return to the FN followed by a return false;
Copy Code code as follows:
$ ("form"). Bind ("Submit", function () {return false;})
② Bound Events
is to disassociate a function that is bound to an event of an element
Unbind ([TYPE],[FN name]) return value: Object parameter-type: Event type string fn Name: function name functions to be unbound
Both of these arguments are optional if the argument is null, the function that is unbound for all occurrences of the matching element
Copy Code code as follows:
$ (function () {$ ("#btn1"). Click (function () {
$ ("Input[type=text]"). Unbind ()})
})
When you click Btn1, all functions that are bound for events that are Type=text text boxes are lifted
③ One-time event binding
Is that a function that is bound for an event of an element can only be executed once
One (TYPE,[DATA],FN) return value: Object parameter-type: Event type String data: Optional, passed as the Event.data property value to the following FN argument Object fn: function functions bound to the event
Using the bind () function, the difference is that the FN in one can only be executed once.
3. Event triggers
Some of these binding functions require the user to perform certain operations before they are executed, such as the Click Event-bound function that requires the user clicks the appropriate element to be executed. However, an event trigger can simulate a user's action action and then perform the functions that the event binds to, without requiring the user to perform some action.
Trigger (Type,[data]) return value: Object parameter-type: Event type String data: Optional, argument array passed to the function to which the triggered event is bound (is a JavaScript array) Triggers all functions that are bound by a type of event that matches an element, and the event trigger performs a browser default action when such an event conflicts with the browser's default action
Copy Code code as follows:
<input id= "Text1" type= "text" value= "Enter user name"/>
<input id= "Text2" type= "text"/>
$ (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 on the code, although the click event for the two text boxes is bound to a function, the last code sets the trigger for the click events of the two text boxes, so you do not need the user to click the corresponding text boxes to perform the functions that their click events bind to. The trigger also passes arguments for the function it triggers, a JavaScript array that can be seen in Text2 's click function.
When the event triggered by the trigger function conflicts with the browser's default action, the event trigger performs the browser default action, and the Triggerhandler function does not perform the browser default action.
Triggerhandler (Type,[data]) is consistent with the use of trigger
4. Interactive handling of events
①hover: Mimic mouse hover
Hover (over,out) return value: Object parameter-over: Mouse to move to a function that triggers on an element out: mouse out the function functions triggered by the element
Copy Code code as follows:
<input type= "text" id= "Hover1"/><span id= "HOVERPD" style= "Display:none"; > Judge user input </span>
$ (function () {$ ("#hover1"). Hover (function () {
$ ("#hoverpd"). Show ();},function () {
$ ("#hoverpd"). Hide ();})
})
②toggle: Circular response for multiple clicks
A number of binding functions are added to the click event of the matching element, which loops through the element as it is repeatedly clicked
Toggle (Fn1,fn2,fn3 ...) return value: Object parameter-fn1,fn2,fn3 ... function functions to loop
Copy Code code as follows:
<input type= "button" id= "Toggle1" value= "Toggle"/>
var i=0;
$ (function () {$ ("#toggle1"). Toggle (function () {i++;$ ("#hover1"). Val (i)},
function () {i=i+2;$ ("#hover1"). Val (i)})
})
5.jQuery of built-in event types
①jquery two ways to declare a built-in event function
event function with no Parameters-event type name () simulates user action
Event function with parameter-event type name (Event function)
$ ($ ("#id"). Click (function () {}) event function with parameters
$ ($ ("#id"). Click (function () {}); $ ("#id"). Click ();) Event functions with no arguments-not only does the #id also execute the corresponding function that simulates the user action
②jquery Built-in Event Type classification
⑴ Browser related events
Error (FN) matching element triggers a function when errors occur, there is no standard error event, such as when the image SRC is invalid will trigger the image Error event
The load (FN) matching element triggers a function after loading, such as window is triggered after all DOM objects have been loaded, and other individual elements are triggered after a single element has finished loading
Unload (FN)
Triggers a function when the resize (fn) match element changes size
Trigger when scroll (FN) scroll bar changes
⑵ Form related events
The change (FN) is triggered when the matching element loses focus, and when the element gets focus
Select (FN) triggers when a user selects a paragraph of text in a text box
Triggered when submission of a form is submitted by submit (FN)
⑶ Keyboard Action related events
Trigger when the KeyDown (FN) keyboard is pressed
KeyPress (FN) keyboard presses and bounces the trigger sequence is keydown->keyup->keypress
KeyUp (FN) keyboard bounces off trigger
⑷ Mouse Action related events
The Click (FN) Order is Mousedown->mouseup->click
MouseDown (FN)
MouseUp (FN)
DblClick (FN)
MouseOver (FN)
Mouseout (FN)
MouseMove (FN) is triggered when moving on a matching element, and the event handler is passed a variable-the event object (whose Clientx,clienty property represents the mouse coordinate)
⑸ interface Displays related events
Blur (FN) when a match element loses focus can be triggered by the mouse or the TAB key
Focus (FN)
