A first look at JQuery (2) event mechanism (2)_jquery

Simply put, Jquery's event processing mechanism is equivalent to specifying various events in HTML tags, such as onclick(), keydown(), etc. Specifying events in tags corresponds to Javascript functions, which facilitates us to achieve my requirements. JQuery's event processing binds these events to the inside of the script, so that we do not need to expose the function in the tag, and it is very convenient to use.

Before introducing the method, I feel it is necessary to describe two strategies for responding to events, one is Event capturing, one is Event bubble (Event bubble), these two strategies are opposite, they were proposed by Netscape and Microsoft respectively in the browser war Two completely opposite event propagation models. Event bubbling is defined as triggering a certain type of event on an object (such as an onclick event). If the object defines a handler for this event, then the event will call this handler. If not Define this event handler or the event returns true, then this event will propagate to the parent object of this object, from inside to outside, until it is processed (all similar events of the parent object will be activated), or it reaches the object The top level of the hierarchy. Event capture is exactly the opposite of event bubbling. Event processing is propagated from the outermost layer of the object inward until terminated. The W3C annotation supports two event processing strategies, but it prefers event bubbling because there are many bugs in event capture. Currently, IE does not support event capture, and other browsers basically support both. Below I will give an example of event bubbling. You will understand after trying it yourself. As for event capturing, forget about it...
Event bubbling

Copy code The code is as follows:

< ;style type="text/css">
#box {width:200px; height:100px; border:2px solid red}
#box h5 {margin:0; padding:2px 5px; font-size :18px; text-align:right; background:red; cursor:move}
#box h5 a {text-decoration:none; color:#FFF}
#box div{ white-space:inherit;}

Close

Then the method to prevent event strategy in JQuery is event.preventDefault() ;(prevents default behavior), event.stopPropagation();event.stopImmediatePropagation();(prevents event bubbling), returns directlyreturn false;(prevents default behavior and time bubbling).

Event processing includes bind(type,[data],fn), bind(map), one(type,[data],fn), trigger(type,[data]), triggerHandler(type,[ data]), unbind([type],[data])These methods.

　1. bind(type,[data],fn) is used to bind the specified event processing function to the specified element, [data] represents the optional passed parameters , it is written as:

Copy the code The code is as follows:

//Binding method with parameters
$("#text").bind('click', { result: "yes" }, function(event) {
alert(event .data.result);
})
//Without parameters and preventing bubbling
$("#text").bind('click', function(e) {
// Custom processing behavior
e.stopPropagation();
})

In fact, we have an abbreviation for bind(type,[data],fn), a way of binding events. method, but their difference is that the abbreviation method cannot specify the parameter [data] like bind. The way of writing is to directly execute the type parameter in bind, as follows:

Copy Code The code is as follows:

$("#text").click(function(e) {
//Customized processing behavior
alert ("abbreviation");
})

2. bind(map) is to bind multiple event handlers to elements at once, written as follows

Copy code The code is as follows:

$('#text'). bind({
click: function() {
alert("bind(map) bound click event");
},
mouseenter: function() {
alert(" bind(map) bound mouseenter event");
}
});

3, one(type,[data],fn)specified The event is only executed once, and the writing method is the same as the bind() method, so I will not demonstrate it here.

　4. trigger(type,[data]), triggerHandler(type,[data])actually have the same effect, they are triggered on each matching element For certain types of events, the only difference is that the former executes event bubbling events, while the latter only executes events on specified elements. Let’s make a comparison:

Copy code The code is as follows:

//HTML code:
trigger()
triggerHandler()

//JQuery code
$("#triggerdiv").click(function() {
alert("DIV trigger");
});
$("#trigger").click(function() {
$("#tri").trigger("click");
});
$("#triggerHandler").click(function() {
$("#tri") .triggerHandler("click");
});
$("#tri").click(function() {
alert("Subset DIV trigger");
});

5. unbind([type],[data]) couldn’t be simpler. Delete the binding event of the specified element. If the type parameter is specified, the specified event will be deleted. , if not specified, deletes all events for the specified element.

Among these mechanisms, the bind method is the one I use most, and the most commonly used is its abbreviation. Of course, these event mechanisms can be used in combination, depending on business needs.

Some people said before that what I wrote was too simple. I would like to state again here that what I am talking about is the basics. I have not been exposed to JQuery for a long time. The purpose is to deepen my own memory and to teach friends who are just learning JQuery. It's just some information, not to say that I am great at JQuery. I hope everyone can learn and make progress together. To be continued...