Last article talked about the event binding methods commonly used in 3: traditional bindings, W3C binding approach, IE bound method. However, in the actual development is important for us, is the need for a universal, binding method of cross-browser. If we find many ways to search on the Internet, it is relatively well-known in several ways:
Before the beginning of the semester several ways, we should discuss it a good addEvent () method which should be required to achieve:
a, support the same elements of the same event handler can bind multiple monitor function;
b, if multiple registration of the same function on the same event handlers of the same element, then all registered after the first registration are ignored;
c, the function body this point should be the node being processed events (e.g., node currently running event handler);
Execution sequence d, the listener function should be performed in the order of binding;
e, without using the function in vivo event = event || window.event; normalized Event objects;
A, John Resig wrote addEvent () function: http://ejohn.org/projects/flexible-javascript-events/
if ( obj.attachEvent ) {
obj[ ' e ' + type + fn] = fn;
obj[type + fn] = function (){obj[ ' e ' + type + fn]( window.event );}
obj.attachEvent( ' on ' + type, obj[type + fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( ' on ' + type, obj[type + fn] );
obj[type + fn] = null ;
} else
obj.removeEventListener( type, fn, false );
}
This function is so easy to understand, it was really surprising. So we still have to look at the five points above:
For the first point satisfied;
For the third point and the fifth point, certainly satisfied;
For the second point, and did not meet because the addEventListener () ignores duplicate registration, and attachEvent () will not be ignored;
But the fourth point, and we did not meet, because Dom standards do not call an object function of time to determine the processing order, so it should not be granted that they called in the order registered.
But this function is still a very good function.
Two, Dean Edward written addEvent () function: http://dean.edwards.name/weblog/2005/10/add-event2/
if ( ! handler.$$guid) handler.$$guid = addEvent.guid ++ ;
if ( ! element.events) element.events = {};
var handlers = element.events[type];
if ( ! handlers) {
handlers = element.events[type] = {};
if (element[ " on " + type]) {
handlers[ 0 ] = element[ " on " + type];
}
}
handlers[handler.$$guid] = handler;
element[ " on " + type] = handleEvent;
}
addEvent.guid = 1 ;
function removeEvent(element, type, handler) {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true ;
event = event || fixEvent(window.event);
var handlers = this .events[event.type];
for ( var i in handlers) {
this .$$handleEvent = handlers[i];
if ( this .$$handleEvent(event) === false ) {
returnValue = false ;
}
}
return returnValue;
};
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function () {
this .returnValue = false ;
};
fixEvent.stopPropagation = function () {
this .cancelBubble = true ;
};
This function uses the traditional binding methods, so it can work in all browsers, and will not cause a memory leak.
But for 5:00 originally proposed, the function just to meet the first four points. Only the last point is not satisfied because there are no provisions in the JavaScript execution order for / in statement is executed in the order assignment, even though most of the time the order is to perform as expected, so this statement in different versions or implementations of JavaScript the order may be different.
Improved three, Dean Edward's addEvent () function
Code
Array.prototype.indexOf = function( obj ){
var result = -1 , length = this.length , i=length - 1;
for ( ; i>=0 ; i-- ) {
if ( this[i] == obj ) {
result = i;
break;
}
}
return result;
}
Array.prototype.contains = function( obj ) {
return ( this.indexOf( obj ) >=0 )
}
Array.prototype.append = function( obj , nodup ) {
if ( !(nodup && this.contains( obj )) ) {
this[this.length] = obj;
}
}
Array.prototype.remove = function( obj ) {
var index = this.indexOf( obj );
if ( !index ) return ;
return this.splice( index , 1);
};
function addEvent(element , type , fun){
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = [];
if(element['on' + type]) {
handlers[0] = element['on' + type];
}
}
handlers.append( fun , true)
element['on' + type] = handleEvent;
}
function removeEvent(element , type , fun) {
if (element.events && element.events[type]) {
element.events[type].remove(fun);
}
}
function handleEvent(event) {
var returnValue = true , i=0;
event = event || fixEvent(window.event);
var handlers = this.events[event.type] , length = handlers.length;
for ( ; i < length ; i++) {
if ( handlers[i].call( this , event) === false ){
returnValue = false;
}
}
return returnValue;
}
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
The function of Dean Edward is my improvement of addEvent () function, fully meet the requirements originally proposed by 5:00. If you have a better way, we look forward to sharing!
Reproduced in: https: //www.cnblogs.com/rainman/archive/2009/02/11/1387955.html