Simple Description of jQuery event binding, triggering, and listening methods; simple description of jquery

Simple Description of jQuery event binding, triggering, and listening methods; simple description of jquery

If you are writing an article or Demo, you can use the event listening function and the methods provided by the event object for simplicity. However, in practice, some methods and attributes have compatibility issues, so we will use jQuery to eliminate compatibility issues.

The basic operations of events in jQuery are as follows.

Bind event and Event Agent

In jQuery, syntax sugar such as click () is provided to bind corresponding events. However, we recommend that you use on () to bind events. Syntax:

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

Events is the name of the event. You can pass the second parameter to implement event proxy. The specific document. on () is not described here.

Event Object)

Some methods of event objects also have compatibility differences. jQuery encapsulates them for processing and provides consistent naming with 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 Method

Clicking a node bound with a click event will naturally trigger the click Event of the node and execute the corresponding callback function.

The trigger method can simulate a trigger event. We can click elementB on another node to use:

$(elementB).on('click', function(){ $(elementA).trigger( "click" );});

Event listening
Event listening in jQuery can be simulated using addEventListener/attachEvent, which corresponds to modern browsers and IE respectively. Two methods can be encapsulated, but other event-related processing methods can be used here for convenience, for example, methods such as removing event listening and blocking default events are written in one object for convenient calling. The specific code is as follows:

// Event processing object var EventUtil = {// add event listening 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 listening remove: function (element, type, callback) {if (element. removeEventListener) {element. removeEventListener (type, c Allback, false);} else if (element. detachEvent) {element. detachEvent ('on' + type, callback);} else {element ['on' + type] = null ;}}, // cross-browser getEvent: function (event) {return event? Event: window. event;}, // cross-browser getTarget property getTarget: function (event) {return event.tar get | event. srcElement;}, // prevent the default event behavior preventDefault: function (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}, // block event streams or use cancelBubble stopPropagation: function () {if (event. stopPropagation) {event. stopPropagation ();} else {event. cancelBubble = true ;}}; // example var at = document. getElementbyId ('temp'); EventUtil. add (at, 'click', function () {console. log ('clicked '); event = EventUtil. getEvent (event); // cross-browser get event object EventUtil. preventDefault (event); // block default events });