Jquery's event processing mechanism plays an important role in the jquery framework. It is like a TV switch. We turn on the TV switch to see the wonderful programs of various TV stations, then we can use jquery's event processing mechanism to create custom behaviors, such as submitting, changing the style, and displaying effects, to enrich our webpages. Of course, its advantages are not only in this regard. Using the jquery event processing mechanism is more flexible and easier to expose than directly using the built-in Event Processing Methods of JavaScript itself, in addition, the more elegant syntax greatly reduces the measurement of our work.
Jquery's event processing mechanisms include page loading, event binding, event delegation, and event switching. We start with the $ (document). Ready () event.
I. page loading $ (document ). ready () is equivalent to the onload () event in Javascript. This method is executed during page loading, but there is a subtle difference between the two. Ready () the event can be executed after HTML is downloaded and parsed into a DOM tree, while the onload () event can only be executed after HTML and all files are downloaded. We can bind other events or functions to the ready () event. The ready () syntax can be expressed as follows:
$ (Document). Ready (function (){});
$ (). Ready (function (){});
$ (Function (){});
Of course, I am still used to the first method to enhance readability. Note that when using the ready () event, make sure that no function is registered in the onload event of the <body> element, otherwise, $ (document) is not triggered ). ready () event. You can also use the $ (document). Ready () event infinitely on the same page. The registered functions are executed sequentially.
2. There are only two methods for event switching, namely the hover () and toggle () methods. Because they intercept combined user operations and respond to multiple functions, therefore, it is also known as the composite event processing mechanism. The hover () method is a method that imitates the mouse hover changes. Simply put, it is the method that executes the action you specify when the mouse moves in and out. The most common method is to implement the menu switching effect. The toggle () method is used when you click to execute the function method you specified in sequence, click to execute the first function for the first time, click to execute the second function for the second time, and so on, it can be deleted using the unbind ('click') method in event binding.
Hover (over, out) instance:
Hover ()
<Style type = "text/CSS">
# Menu
{
Background-color: red;
Width: 150px;
Height: 30px;
Text-align: center;
Border: solid 1px black;
}
# Menu_child
{
Width: 150px;
Border: solid 1px black;
Display: none;
}
# Menu_child Div
{
Background-color: # f3f3f3;
Width: 150px;
Height: 30px;
Text-align: center;
}
</Style>
<Script language = "JavaScript" type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# Menu"). Hover (
Function (){
$ ("# Menu_child"). fadein ();
},
Function (){
$ ("# Menu_child"). fadeout ();
});
});
</SCRIPT>
</Head>
<Body>
<Div id = "menu"> jquery event processing </div>
<Div id = "menu_child">
<Div> page loading </div>
<Div> event binding </div>
<Div> event DeleGate </div>
<Div> event switching </div>
</Div>
</Body>
Toggle (FN, FN) instance:
CodeHTML code
<Input type = "button" value = "toggle () method" id = "toggle"/>
Jquery code
$ ("# Toggle"). Toggle (
Function (){
Alert ("first click ");
},
Function (){
Alert ("second click ");
},
Function (){
Alert ("third click ");
},
Function (){
Alert ("fourth click ");
});
3. There are only two methods for event delegation: Live () and die (). These two methods are added after version 1.3, but they are not available in previous versions. Live () can be understood as the element group event Delegate method. For example, the Li element binds a click event with live. When a new Li is added to this page, the click event is still available for the newly added Li, instead of re-binding the event to the newly added element, it is quite useful when writing tree plug-ins. The die () method is well explained and used to unbind the live () method.
Live (type, FN): currently, the type parameter in live () only supports click, dblclick, mousedown, mouseup, mousemove, Mouseover, mouseout, keydown, keypress, and keyup events. The instance is as follows:
CodeHTML code:
<Ul>
<Li> page loading </LI>
<Li> event binding </LI>
<Li> event delegation </LI>
<Li> event switching </LI>
</Ul>
Jquery code:
$ ("Li"). Live ('click', function (){
VaR Index = $ ("Li"). Index (this); // obtain the index of Li.
VaR text = $ ("Li"). eq (INDEX). Text (); // obtain the text value based on the index of the clicked item
Alert ("index:" + index + ", text value:" + text );
});
Die ([type], [FN]): It is quite simple to use for Die (). One is to delete all live () events, the other is to specify the deletion, and the two parameters are optional.
Code
$ ("# Die"). Click (function (){
$ ("Li"). Die (); // delete all live () Events
$ ("Li"). Die ("click"); // Delete the live () event specified as click
$ ("Li "). die ('click', function () {alert ("Live () event deleted successfully")}); // Delete the live () event specified as click and execute the Function
});
For reference only. You are welcome to join the discussion. In the next article, we will talk about event binding, which is too long to write together. To be continued ........
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
