JS Add event attachevent and AddEventListener usage

In general we add the event in JS, this is the

1	obj.onclick=method

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.0return 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) {//为每一个事件处理函数分派一个唯一的IDif (!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