A first look at JQuery (2) Event mechanism (1)

A first look at JQuery (2) Event mechanism (1)_jquery

WBOY

Release： 2016-05-16 18:15:17

Original

1859 people have browsed it

Of course, its advantages are not limited to this. Using the JQuery event processing mechanism is more flexible than directly using some of the built-in event response methods of Javascript itself, is less likely to be exposed, and has more elegant syntax, which greatly reduces the scale of our work. .

JQuery’s event processing mechanism includes four mechanisms: page loading, event binding, event delegation, and event switching. Let’s start with the $(document).ready() event.

　 1. Page loading $(document).ready() is equivalent to the onLoad() event in Javascript. This method is executed when the page is loaded, but there are subtle differences between the two. , the ready() event can be executed after the HTML download is completed and parsed into a DOM tree, while the onLoad() event cannot be executed until the HTML including files are downloaded. We can bind some other events or functions in the ready() event. There are several syntaxes for ready():

　$(document).ready(function(){});

　$().ready(function(){});

　$(function(){});

Of course, I personally am still accustomed to using the first method to enhance readability. What needs to be noted is that when using the ready() event, please make sure that there is no onload event in the element. Register the function, otherwise the $(document).ready() event will not be triggered. You can also use the $(document).ready() event unlimited times in the same page. The registered functions will be executed in sequence (in the code).

　2. Event switching has only two methods, hover() and toggle(), because they intercept combined user operations and respond with multiple functions , so it is also called composite event processing mechanism. The hover() method is a method that imitates mouse hover changes. Simply put, it is a method that executes the behavior you specify when the mouse moves in and out. The most commonly used method is to create menu switching effects. The toggle() method is to execute the function methods you specify in order when you click. The first click executes the first function, the second click executes the second function, and so on. It can use unbind in event binding. ('click') method to delete.

　hover(over,out) instance: 　

Copy code The code is as follows:

JQuery event handling

Page loading

Event binding

Event delegation

Event Toggle

toggle(fn,fn) Example:

Copy code The code is as follows:

HTML code

JQuery code
$("#toggle").toggle(
function() {
alert("First click" );
},
function() {
alert("Second click");
},
function() {
alert("Third click" );
},
function() {
alert("Fourth click");
});

3. Event delegation There are only two methods, live() and die(). These two methods were added after version 1.3 and were not available in previous versions. . live() can be understood as an element group event delegation method. For example, the li element uses live to bind the click event. Then when a li is added to this page in the future, the click event of this newly added li will still be available without having to re-bind the event to the newly added element, which is very useful when writing a tree plug-in. The die() method is easy to explain, it is a method used to unbind live().

　live(type,fn):The type parameter in live() currently only supports click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup event. The example is as follows

Copy code The code is as follows:

 
HTML code: 

Page Loading

Event Binding

Event Delegation

Event switching

 
JQuery code: 
$("li").live('click', function() { 
 var index = $("li").index(this);//Get the index of li
var text = $("li").eq(index).text();//According to the clicked item index Get the text value 
alert("index: " index ", text value: " text); 
}); 

die([type],[fn]):die( ) is quite simple to use. One is to delete all live() events, and the other is to specify the deletion. The two parameters are optional.

Copy code The code is as follows:

 
$("#die").click(function( ) { 
$("li").die(); //Delete all live() events 
$("li").die("click"); //Delete the live() specified as click )Event
$("li").die('click', function() { alert("Delete live() event successfully") });//Delete the live() event specified as click and execute the function 
}); 

For reference only, interested friends are welcome to participate in the discussion. The next article will talk about event binding, it would be too long to write together. To be continued...