JQuery: describes events in jQuery (2) and events in jquery

JQuery: describes events in jQuery (2) and events in jquery

In the previous article, we talked about events in jQuery and learned more about loading DOM and event binding. This article mainly discusses merging events, event bubbling, event removal, and other content in jQuery events.

Next, jQuery: describes events in jQuery (1)

3. Merging events

JQuery has two merging events: the hover () method and the toggle () method. Like the ready () method, these are all jQuery-defined methods.

Hover () method:The syntax structure of the hover () method is as follows:

hover(enter, leave);

The hover () method is used to simulate a mouse hover event. When you move the mouse over an element, the specified first function (enter) is triggered. When you move the mouse over this element, the specified second function (leave) is triggered ).

In the previous article, an example is written as follows:

$ (Function () {$ ("# container h4.head "). bind ("mouseover", function () {$ (this ). next (). show (); // obtain and display the "content" element }). bind ("mouseout", function () {$ (this ). next (). hide ();});})

You can rewrite this example to the following jQuery code:

$ (Function () {$ ("# container h4.head "). hover (function () {$ (this ). next (). show (); // get and display the "content" element}, function () {$ (this ). next (). hide ();});})

The running effect of the above two codes is the same.

* The hover () method of jQuery replaces bind ("mouseenter") and bind ("mouseleave") in jQUery accurately "), instead of replacing bind ("mouseover") and bind ("mouseout"), what are the differences between the two bind functions? Resolution:

Mouseover and mouseenter

The mouseover event is triggered regardless of whether the mouse pointer passes through the selected element or its child element.
The mouseenter event is triggered only when the mouse pointer passes through the selected element.

Mouseout and mouseleave
The mouseout event is triggered no matter the mouse pointer leaves the selected element or any child element.
The mouseleave event is triggered only when the mouse pointer leaves the selected element.

To put it simply, mouseover and mouseout will trigger a larger area. mouseenter and mouseleave can only be triggered for bound elements.

 

Toggle () method:The syntax structure of the toggle () method is as follows:

toggle(fn1, fn2, fn3, ...);

The toggle () method is used to simulate consecutive Mouse clicking events. Each time you click an element, trigger the specified function until the last one. The subsequent call to these functions is repeated at each click.

The previous article uses the following example. If you want to continuously click the "title" link to hide and display the "content, in this case, when binding the "click" event, you need to determine whether the current "content" part is hidden or displayed, and then perform the opposite operation, which is obviously a lot of trouble.

$(function(){    $("#container h4.head").bind("click", function(){       var $content = $(this).next();
　　　　if($content.is(":visible"))
　　　　　　$content.hide();
　　　　else
　　　　　　$content.show();
    }  })

However, this method is obviously troublesome and is not the most suitable. The toggle () method is suitable for this requirement. The preceding example is rewritten using the toggle () method:

$(function(){  $("#container h4.head").toggle(function(){    $(this).next().show();  },  function(){    $(this).next().hide()  })})

 

4. Event bubbling: there can be multiple events on the page, or multiple elements can correspond to the same event, just like the two events described above. For another example, assume that A web page has two elements, one element A is nested in another element B, and both are bound with the click event, and the body element is also bound with the click event. When you click child element A, three click events are triggered in sequence. When you click child element B, two click events are triggered in sequence.

As described above, we can see the problem, that is, unexpected click events will occur, so we need to limit the scope of the event.

JQuery has three solutions to solve the problem caused by event bubbles.

　　Event object:That is, the previously introduced bind () method, for example:

$ ("Element"). bind ("click", function (event) {// event: event object // code ...})

In the code above, when you click the element, the event object is created. This event object can be accessed only by the event processing function. After the event processing function is executed, the event object is destroyed.

　Stop event bubbling:Stopping event bubbling can prevent the event processing functions of other objects from being executed. The stopPropagation () method is provided in jQuery to stop event bubbling.

$ ("Element"). bind ("click", function (event) {// event: event object // code...
// Code...
Event. stopPropagation (); // stop event bubbling })

Prevent default behavior:Similar to the stopPropagation () method above, jQuery also provides the preventDefault () method to prevent the default behavior of elements.

 

5. Remove an event: When binding an event, you can bind multiple events to the same element, or bind the same event to multiple elements. We will not illustrate this here.

Therefore, removing an event involves removing the event in two cases. One is to remove all previously registered events, but to remove one of them. Take a button as an example: Assume that there is a button with the id btn In the webpage, and several click events are bound to it. So:

First, add a button to remove the event:

<Button id = "delAll"> remove all events </button>

Then, you can bind several click events to the button. Using the chain operation, you can easily bind several click events to the button.

Finally, write the processing function for removing all click events. The jQuery code is as follows:

$("#delAll").click(function(){  $('#btn').unbind("click");})

Because all elements are bound with click events, the same effect can be achieved without the "click" parameter.

Therefore, we can see the syntax structure of the unbind () method:

unbind([type], [data]);

The first parameter is the event type, and the second parameter is the function to be removed. Obviously, the unbind () method without the second parameter is used to remove all events on the element.

If the first parameter is not specified, all bound events are removed. Otherwise, only events of this type are deleted.

If the second parameter is input, only this specific event handler function will be deleted. This is exactlyAn event that removes an element..