jquery removal element Automatic binding event implementation idea and code _jquery

This is the way the world should be!

So, in modern browsers, if you remove an element from a DOM tree, the browser automatically binds the event you bind to free up the memory it occupies. You may have guessed that older browsers would not do this, so the longer your app runs in older browsers, the more memory it consumes and the more it gets stuck. Therefore, we need to do an event-binding on the elements we want to delete ourselves.

realize the idea

The basic method of removing elements in jquery is typically three, one is the Remove () method, one is the HTML () method, and the other is the empty () method. We can further encapsulate these three methods by adding a property identifier to the element that binds the event when the event is bound, looking for the element to be removed from the element to be deleted, and then the full unbind of the event. Everything is so ingenious! It is important to note that the remove () method performs an event-binding on itself at execution time, and that the method can accept a selector parameter to delete its child elements.

Implementation Code

With the idea of implementation, the code can be quickly done. As follows:

Copy Code code as follows:

define ([' jquery ', ' underscore '], function () {
var binddirects = [' delegate ', ' bind ', ' on ', ' hover ', ' blur ', ' Change ', ' click ', ' DblClick ', ' Focus ', ' KeyDown ', ' keypress ' , ' KeyUp ', ' MouseDown ', ' mouseenter ', ' mouseleave ', ' MouseMove ', ' mouseout ', ' mouseover ', ' mouseup ', ' resize ', ' scroll ', ' SELECT ', ' submit '];
var emarker = ' _addedevent ';
_.each (binddirects, function (eventName) {
var alias = $.fn[eventname];
$.fn[eventname] = function () {
var $tar = _.iselement (this)? $ (a): this;
var haseventadded = $tar. attr (emarker) | | '';
var _en = EventName;
if (haseventadded.length) {
_en + = ', ' + haseventadded;
}
$tar. attr (Emarker, _en);
Return Alias.apply (The _.iselement (this)? $tar: This, [].slice.call (arguments));
};
});
To remove a bound event for an element
function Removeevents ($tar) {
var addedeventsname = $tar. attr (Emarker);
if (addedeventsname) {
Addedeventsname.replace (/[^,]+/g, function (eventName) {
All removed
if (EventName = = ' delegate ') {
$tar. Undelegate ();
} else {
$tar. Unbind ();
}
return eventName;
});
}
}

var funcs = [' html ', ' empty '];
_.each (Funcs, Function (func) {
var alias = $.fn[func];
$.fn[func] = function () {
var $tar = _.iselement (this)? $ (a): this;
if ($tar. length) {
$tar. Find (' *[' + Emarker + '] "). each (function (k, Subel) {
try{
Removeevents ($ (Subel));
}catch (e) {
Console.error (E.message);
}
});
}
var args = [].slice.call (arguments);
Return alias.apply ($tar, args);
};
});
Extended Remove () method
var alias = $.fn.remove;
$.fn.remove = function () {
var $tar = _.iselement (this)? $ (a): this,
arg = arguments;
if ($tar. Length &&!arg.length) {
$tar. Find (' *[' + Emarker + '] "). each (function (k, Subel) {
try{
Removeevents ($ (Subel));
}catch (e) {
Console.error (E.message);
}
});
}
if (arg.length) {
var selector = arg[0];
if (_.isstring (selector)) {
$tar. Find (selector). each (function (K,curel) {
var $cur = $ (Curel);
$cur. Find (' *[' + Emarker + '] "). each (function (k, Subel) {
try{
Removeevents ($ (Subel));
}catch (e) {
Console.error (E.message);
}
});
Removeevents ($cur);
$cur. Remove ();
});
}
}
var args = [].slice.call (arguments);
Return alias.apply ($tar, args);
};
});

Or that sentence, the more you know, the more you can do!