Event delegate additions and removal

Jquery.extend ({

Binding events
Addevent:function (ele, type, fn) {

Ele not Dom,type is not a string, FN is not a function, pack and go
if (!jquery.isdom (ele) | | |!jquery.isstring (type) | |!jquery.isfunction (FN)) {
return false;
}

Compatible processing
if (Ele.addeventlistener) {
Ele.addeventlistener (type, FN);
}else {
Ele.attachevent (' on ' + type, fn);
}
},

removing events
Removeevent:function (ele, type, fn) {

Ele not Dom,type is not a string, FN is not a function, pack and go
if (!jquery.isdom (ele) | | |!jquery.isstring (type) | |!jquery.isfunction (FN)) {
return false;
}

Compatible processing
if (Ele.removeeventlistener) {
Ele.removeeventlistener (type, FN);
}else {
Ele.detachevent (' on ' + type, fn);
}
}
});

JQuery.fn.extend ({

Binding events
On:function (type, selector, fn) {
/*
* Realization Idea:
* 1, the first time an element is bound to an event, the element is initialized by the event type to store an array of corresponding event handlers
* 2, then the FN stored in, and then call the element addevent static method to bind the corresponding event,
* 2.1. When this event is triggered, iterate through the array of corresponding event handlers and execute them in sequence
* 2.2, at the same time to change the function execution when the internal this is the binder
* 2.3, at the same time, the event object is passed to the function for its use
* 3, later to this element binding has been tied to the event, simply push the event handler function to the corresponding array.
* 4, Chain programming return this
* */

If two parameters are passed in, then the second one is considered an event handler and then the selector is set to NULL
fn = fn | | Selector
selector = jquery.isstring (selector)? Selector:null

Traverse all elements
Return This.each (function () {

var = this;

If there is no event_cache between the elements, then initialize it and have it before you continue using it.
var Ecache = Self.event_cache = Self.event_cache | | {};

function to be called by the browser when the event is triggered
function Eventhandle (e) {
/*
* Realization Idea:
* 1, from the event source, to the specified element, to get all the elements bubbling through the middle
* 2, gets the corresponding event in the array, all the event delegate object
* 3, traversing all bubbling elements,
* 4, Traverse all event delegate object, get selector corresponding element in each object
* 5, then each bubbling element is compared with each selector element, and if equal, the function stored in the corresponding event delegate object is executed
* 6, after the execution of all the functions of the delegate, traverse the object that is not delegated, execute the function stored inside
* */

Get all elements passing through the bubbling phase
var target = E.target | | E.srcelement;
var targets = [];
while (target && target!== self) {
Targets.push (target);
target = Target.parentnode;
}

Gets the delegate object for the corresponding event
var delegatehandleobjs = ecache[type].slice (0, Ecache[type].delegatecount);
Gets the object for the non-event delegate
var handleobjs = Ecache[type].slice (Ecache[type].delegatecount);

function to execute delegate
Traversing bubbling elements
Jquery.each (Targets, function () {

Here this points to each element that the bubbling phase encounters
var target = this;

Traverse all the delegate objects
Jquery.each (DELEGATEHANDLEOBJS, function () {

var fn = This.fn,
selector = This.selector;

/*
* Here you can try using Target's nodename,id,class and selector to compare,
* If the requirement is met, the corresponding FN can be executed directly,
* You don't have to go. The following page elements are compared.
* */

Determine if the target satisfies the selector requirement, and then executes the FN
var selectornodes = Self.queryselectorall (selector);
Jquery.each (Selectornodes, function () {
if (target = = = This) {

An event delegate executes a function inside this, pointing to the delegate
Fn.call (target, E);

In line with current selector requirements, continue to determine if Target meets the next selector
return false;
}
});
});
});

Perform a function that is not delegated (to an element to bind itself to an event)
Jquery.each (HANDLEOBJS, function () {
This.fn.call (self, e);
});
}

If there is no corresponding array of events, then it is considered the first time that the event is bound.
The array needs to be initialized, and the array is also added a property that records the number of delegate functions.
Finally, the browser native API binding event is called
if (!ecache[type]) {

ecache[type] = [];
ecache[type].delegatecount = 0;

Jquery.addevent (self, type, eventhandle);
}

Creating event-handling objects, storing them in an array of events
var handleobj = {
FN:FN,
Selector:selector
};

The delegate's event-handling object, stored in front of the non-commissioned
if (selector) {
ecache[type].splice (ecache[type].delegatecount++, 0, handleobj);
}
An event handler object that is not delegated, stored directly behind the event array
else {
ecache[type].push (handleobj);
}
});
},

removing events
Off:function (type, selector, fn) {
/*
* Realization Idea:
* 1, traversing all elements, if the elements have Event_cache and then proceed to the next process
* 2. If no parameters are passed, empty each array stored in the Event_cache object
* 3, if a parameter is passed, empty the specified array in the Event_cache object
* 4, if two parameters are passed, clear the function specified in the specified array in the Event_cache object
* 5, Chain programming return this
* */
var fn = fn | | Selector
selector = jquery.isstring (selector)? Selector:null;

var arglen = arguments.length;

Return This.each (function () {

var arr = null;
var = this;
var Ecache;

If you have event_cache this object, it means that the element has helped the event,
The removal process is further based on the number of parameters.
if (Ecache = This.event_cache) {

Clear all array of events without reference
if (Arglen = = = 0) {
Jquery.each (Ecache, function (key, arr) {
ecache[key] = [];
ecache[key].delegatecount = 0;
});
}

Pass 1 parameters to clear the specified array of events
else if (Arglen = = = 1) {
ecache[type] = [];
ecache[type].delegatecount = 0;
}

Pass 2 parameters, clear the specified selector or FN in the specified event array
else if (Arglen = = = 2) {

Compares objects in all event objects that conform to selector, and then deletes the corresponding total number of delegates to subtract from
if (jquery.isstring (selector)) {

for (var i = ecache[type].length-1; I >= 0; i--) {
if (ecache[type] [i].selector = = = Selector) {
ecache[type].splice (i, 1);
ecache[type].delegatecount--;
}
}
}

Compares the FN-compliant objects in all event objects, and then deletes
else {

for (var i = ecache[type].length-1; I >= 0; i--) {
if (ecache[type] [i].fn = = = fn) {

If the delegate object is deleted, the total number of delegates is reduced
if (ecache[type] [i].selector) {
ecache[type].delegatecount--;
}
ecache[type].splice (i, 1);
}
}
}
}

Pass 3 parameters, clear the specified event array, specify selector specified fn
else if (Arglen = = = 3) {
for (var i = ecache[type].length-1; I >= 0; i--) {

Selector and FN are equal, the event delegate object is deleted, and the corresponding total number of delegates is reduced
if (ecache[type] [i].selector = = = Selector
&& ecache[Type [i].fn = = = fn] {
ecache[type].splice (i, 1);
ecache[type].delegatecount--;
}
}
}
}
});
},

Delegate:function (selector, type, fn) {
Return This.on (type, selector, FN);
},

Bind:function (Type, fn) {
Return This.on (Type, FN);
}
});

Add some shorthand for the event bindings for the prototype
var events = [' Click ', ' Change ', ' resize ', ' MouseDown ', ' mouseout ', ' MouseEnter '];
Jquery.each (events, function (I, eventName) {
jquery.fn[EventName] = function (FN) {
Return This.on (EventName, FN);
}
});

Event delegate additions and removal