In general we add the event in JS, this is the
This way of binding events is compatible with mainstream browsers, but what if one element is added multiple times the same event?
123 |
obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; |
If this is written, then only the last bound event, here is method3 will be executed, this time we can not use the onclick such writing, the protagonist changed the debut, in IE we can use the Attachevent method
1234 |
//object.attachEvent(event,function); btn1Obj.attachEvent( "onclick" ,method1); btn1Obj.attachEvent( "onclick" ,method2); btn1Obj.attachEvent( "onclick" ,method3); |
The use of the format is preceded by the event type, note that the need to add on, such as Onclick,onsubmit,onchange, the order of execution is
Method3->method2->method1
Unfortunately this Microsoft private method, Firefox and other browsers are not supported, fortunately they all support the standard AddEventListener method
1234 |
//element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener( "click" ,method1, false ); btn1Obj.addEventListener( "click" ,method2, false ); btn1Obj.addEventListener( "click" ,method3, false ); |
Execution order is method1->method2->method3
To do the front-end development engineer, the most tragic one is too browser-compatible problem, there are two ways to add events, in order to add the same event method, we have to re-write a common add event function, thanks to the predecessors to help us do this thing
12345678910111213 |
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
//DOM2.0
return true
;
}
else if (elm.attachEvent) {
var r = elm.attachEvent(‘on‘ + evType, fn);
//IE5+
return r;
}
else {
elm[
‘on‘ + evType] = fn;
//DOM 0
}
}
|
Here's the version of Dean Edwards.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
function addEvent(element, type, handler) {
//为每一个事件处理函数分派一个唯一的ID
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;
};
//用来创建唯一的ID的计数器
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
;
//抓获事件对象(IE使用全局事件对象)
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;
};
//为IE的事件对象添加一些“缺失的”函数
function fixEvent(event) {
//添加标准的W3C方法
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault =
function
() {
this
.returnValue =
false
;
};
fixEvent.stopPropagation =
function
() {
this
.cancelBubble =
true
;
};
|
The function is very strong, solve the IE this point problem, the event is always passed as the first parameter, cross-browser is even more.
Finally contribute a version of the HTML5 workgroup:
12345678910111213141516171819202122232425 |
var addEvent=(
function
(){
if
(document.addEventListener){
return function
(el,type,fn){
if
(el.length){
for
(
var i=0;i<el.length;i++){
addEvent(el[i],type,fn);
}
}
else
{
el.addEventListener(type,fn,
false
);
}
};
}
else
{
return function
(el,type,fn){
if
(el.length){
for
(
var i=0;i<el.length;i++){
addEvent(el[i],type,fn);
}
}
else
{
el.attachEvent(‘on‘+type,
function
(){
return fn.call(el,window.event);
});
}
};
}
})();
|
Perhaps the attentive reader has discovered that the attachevent of IE and the standard of addeventlistener binding multiple events are executed in a different order.
Attachevent IE Add Event
addeventlistener-webkit-Adding events
JS Add event attachevent and AddEventListener usage