Jquery Secrets series: bind, one, live, and delegate events and Implementations

In Jquery, we use event binding, which has multiple functions. For example, bind, one, live, and delegate. Let's take a look at their definition and directly go to the topic: the bind () method is used to attach a handler to the event of each Matching Element and return the jQuery object.. In bind (eventType [, evnetData], Handler (eventObject), The eventType parameter is a string that contains one or more javaScript event types, such as click, submit or custom event name. Multiple event types are separated by spaces. eventData is of the Map type and data to be passed to the event processing process is given, handler specifies the function to be executed when the event is triggered. eventObject indicates the event object. The. bind () method attaches the event handler to an eventType event that matches each element in the element set. If necessary, it can also pass data to the event handler. The live () method attaches an event handler to a specified event that matches all elements of the current selector (including existing or future additions) and returns the jQuery object.. Live (eventType, [eventData], handler) where the eventType parameter is a string that contains one or more javaScript event types, such as click, keydown, or custom event names, eventData is an optional parameter. It is of the Map type and provides the data to be passed to the event handler. this parameter is added in jQuery1.4. handler is a function, these functions are executed when this event is triggered. the live () method attaches the event handler to the eventType event of each Matching Element (including the existing and future additions, if necessary, you can also use eventData to transmit data to the event handler.. The live () method is basic. A deformation of the bind () method. The latter can append the event handler to the element when calling. when bind (), the elements matching the jQuery object will be appended to the event handler, but the elements to be added later will not be appended to the event handler. Therefore, you also need to call these elements again. bind () method. The. one () method attaches the event handler to the specified event of the matching element and returns the jQuery object. The attached event handler can be executed only once at most.. One (eventType, [eventData], handler (eventObject), where the eventType parameter is a string that contains one or more javaScript event types, such as click, submit or custom event name. Multiple event types are separated by spaces. eventData is of the Map type and data to be passed to the event processing process is given, handler specifies the function to be executed when the event is triggered. eventObject indicates the event object. The. one () method is similar to. bind (). The difference is that the event handler bound with. one () will be automatically unbound once it is executed. The. delegate () method attaches the handler to one or more events that match all elements of the selector (existing or future) based on a specific set of root elements.. Delegate (selector, eventType [, eventData], handler) where the selector parameter is a selector used to filter the elements that trigger events; eventType is a string, specify one or more JavaScript event types (multiple events are separated by spaces), such as click, keydown, or custom event names. eventData is of the ing type, indicates the data to be passed to the event handler; handler indicates the function executed when the event is triggered.. Delegate () is similar to. live (). You can delegate the binding of each event to a specified DOM element. Let's talk about the difference: bind is the binding of elements after the dom tree is loaded. It is a later binding. One is the binding of elements after the dom tree is loaded. Like bind, one is a later binding event, but the binding event of elements is removed after the event is executed. The event is executed only once. Live first binds the event to the document object, and uses event bubbles to determine whether the element in the target State is pre-bound to the element object, and then executes the event, which is pre-bound, the element can exist or be dynamically added. The delegate binding element can already exist or be dynamically added. If a parent element already exists, a parent element is selected and the events of the child element are triggered by bubbling. If it is dynamically added, the document is the parent element to trigger the bubble event. (Note: later binding means binding events after an element is loaded. Pre-binding means that the element does not exist and an event is added to the dynamic element. We recommend that you use bind and delegate for these methods, because live is the binding event on the document, then, the event is executed through the bubble query element, which consumes a lot of performance. Their native js implementation: copy the code to copy the code (function (context) {var _ $ = function (selector) {return new _ $. prototype. init (selector);} _ $. prototype = {Init: function () {var arr = Array. prototype. slice. call (arguments); if (arr. length> 0) {if (typeof arr [0] = "string") {this. element = document. getElementById (arr [0]);} else if (Object. prototype. toString. call (arr [0]) = "object Object") {this. element = arr [0] ;}}, bind: function (type, fn) {if (this. element) {if (document. addEventListener) {this. element. addEventListener (type, fn, false);} else if (document. attachEvent) {this. element. attachEvent ('on' + type, fn);} else {this. element ['on' + type] = fn ;}}, unbind: function (type, fn) {if (this. element) {if (document. removeEventListener) {this. element. removeEventListener (type, fn, false);} else if (document. attachEvent) {this. element. detachEvent ('on' + type, fn);} else {this. element ['on' + type] = null ;}}, one: function (type, fn) {var self = this; if (this. element) {if (document. addEventListener) {this. element. addEventListener (type, function () {self. element. removeEventListener (type, arguments. callee, false); fn () ;}, false) ;} else if (document. attachEvent) {this. element. attachEvent ('on' + type, function () {self. element. detachEvent ('on' + type, arguments. callee); fn () ;}) ;}else {this. element ['on' + type] = function () {self. element ['on' + type] = null; fn () ;}}}, live: function (type, fn) {var self = this; if (document. addEventListener) {document. addEventListener (type, function (e) {var evt = e | window. event; var target = evt. srcElement | evt.tar get; if (target. id = self. element. id) {fn () ;}}, false) ;}else if (document. attachEvent) {document. attachEvent ('on' + type, function (e) {var evt = e | window. event; var target = evt. srcElement | evt.tar get; if (target. id = self. element. id) {fn () ;}}) ;}else {document ['on' + type] = function (e) {var evt = e | window. event; var target = evt. srcElement | evt.tar get; if (target. id = self. element. id) {document ['on' + type] = null; fn () ;}}}, delegate: function (flag, type, fn) {var self = this; if (document. addEventListener) {self. element. addEventListener (type, function (e) {var evt = e | window. event; var target = evt. srcElement | evt.tar get; if (target. tagName. toLowerCase () = flag) {fn () ;}, false) ;}else if (document. attachEvent) {self. element. attachEvent ('on' + type, function (e) {var evt = e | window. event; var target = evt. srcElement | evt.tar get; if (target. tagName. toLowerCase () = flag) {fn () ;}} else {self. element ['on' + type] = function (e) {var evt = e | window. event; var target = evt. srcElement | evt.tar get; if (target. tagName. toLowerCase () = flag) {fn () ;};}}_ $. prototype. init. prototype = _ $. prototype; context. $ =_$;}) (window); copy the code