A simple description of the binding, triggering, and listening methods of jquery events _jquery

If you are writing an article or Demo, for simplicity, you can of course use the event listener function and the methods provided by those event objects. But in practice, there are some methods and properties that have compatibility issues, so we use jQuery to eliminate compatibility issues.

Here's a quick look at the basics of the events in JQuery.

Binding events and Event agents

In jQuery, syntax sugars such as Click () are provided to bind the corresponding events, but it is recommended that the uniform use on () to bind events. Grammar:

. On (events [, selector] [, data], handler)

Events is the name of the event, you can pass the second parameter to implement the event agent, specific document. On () no more details here.

Event object that handles compatibility

There are also compatibility differences among event objects, such as JQuery, which encapsulates them and provides the same name as the standard.

If you want to access the original event object in the JQuery event callback function, you need to use event.originalevent, which points to the native event object.

Trigger Event Trigger Method

Clicking on a node that is bound to the Click event naturally triggers the Click event of the node to perform the corresponding callback function.

Trigger method can simulate triggering event, we click another node ELEMENTB, we can use:

$ (ELEMENTB). On (' click ', Function () {
 $ (Elementa). Trigger ("click");
});

The

event listens for event sniffing in
jQuery, and can be used for addeventlistener/attachevent simulations, respectively, for modern browsers and IE, to encapsulate two methods, but for convenience, Here the other event-related processing, such as the removal of event listening, blocking the default event, and other methods of unified writing in an object, easy to invoke, the specific code is as follows:

Event Processing Object var eventutil = {//Add Event listener add:function (element, type, callback) {if (Element.addeventlistener) {
  Element.addeventlistener (Type, callback, false);
  else if (element.attachevent) {element.attachevent (' on ' + type, callback);
  else {element[' on ' + type] = callback; },//Remove Event listener remove:function (element, type, callback) {if (Element.removeeventlistener) {Element.removeeve
  Ntlistener (Type, callback, false);
  else if (element.detachevent) {element.detachevent (' on ' + type, callback);
  else {element[' on ' + type] = NULL;
 ///cross-browser Get event object Getevent:function (event) {return event event:window.event;
 },//cross-browser Get target property gettarget:function (event) {return Event.target | | event.srcelement;
  },//block the default behavior of events Preventdefault:function (event) {if (Event.preventdefault) {event.preventdefault ();
  else {event.returnvalue = false; },//block event flow or use cancelbubble Stoppropagation:fuNction () {if (event.stoppropagation) {event.stoppropagation ();
  else {event.cancelbubble = true;
 
}
 }
 
};
Use example var at = document.getElementById (' atemp ');
 
 Eventutil.add (AT, ' click ', Function () {Console.log (' clicked on '); event = Eventutil.getevent (event); Cross-browser to get Event object Eventutil.preventdefault (event);
 Block default event});