function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) { obj.addEventListener(evtype,fn,useCapture); } else { obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获 } else { obj["on"+evtype]=fn;//事实上这种情况不会存在 } } function delEvent(obj,evtype,fn,useCapture) { if (obj.removeEventListener) { obj.removeEventListener(evtype,fn,useCapture); } else { obj.detachEvent("on"+evtype,fn); } else { obj["on"+evtype]=null; } }
IE的attach方法有个问题，就是使用attachEvent时在事件处理函数内部，this指向了window，而不是obj！当然，这个是有解决方案的！
但IE的attachEvent方法有另外一个问题，同一个函数可以被注册到同一个对象同一个事件上多次，解决方法：抛弃IE的 attachEvent方法吧！IE下的attachEvent方法不支持捕获，和传统事件注册没多大区别(除了能绑定多个事件处理函数)，并且IE的 attachEvent方法存在内存泄漏问题！
addEvent,delEvent现代版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js事件监听</title> <style> table td{font:12px; border-bottom:1px solid #efefef;} </style> </head> <body> <div> <input type="button" value="button" /><br /> <input type="button" value="button2" /><br /> <input type="button" value="button3" /><br /> <input type="button" value="button4" /><br /> <table> <tr><td>111111111111111111111111111111</td></tr> <tr><td>222222222222222222222222222222</td></tr> <tr><td>333333333333333333333333333333</td></tr> <tr><td>444444444444444444444444444444</td></tr> <tr><td>555555555555555555555555555555</td></tr> </table> </div> <script language="javascript" type="text/javascript"> function eventfun(){//1.直接把js方法写在页面结构上 console.log(this);//这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, 对象是window,this指向的是window alert(this); } function eventfun2(eve){//在这里把事件对象作为参数传递到全局方法里 eve.name="alex";// window.name="robin"; console.log(this);//[object Window] console.log(eve);// [object HTMLInputElement] console.log(this.name);// robin console.log(eve.name);// alex var self=eve; console.log(this.name);//robin console.log(self.name);//alex alert(window.name); alert(self.name); } function eventfun3(){//1.直接把js方法写在页面结构上 console.log(this);//这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, 对象是window,this指向的是window console.log(this.id); alert(this); alert(this.id); //var outEleObj = EventUtil.$("outEle"); //removeEvent(outEleObj,"click",eventfun3); } /* var EventUtil = {}; EventUtil.$ = function(id){ return document.getElementById(id); } EventUtil.openmes = eventfun3; EventUtil.addEventHandle = function(eventTarget,eventtype,eventHandle){//定义事件监听的对象元素,事件类型，事件函数 if(eventTarget.attachEvent){ eventTarget.attachEvent("on"+eventtype,eventHandle); }else if(eventTarget.addEventListener){ eventTarget.addEventListener(eventtype,eventHandle,false) }else{ eventTarget["on" + eventtype] = null; } }; EventUtil.deleEventHandle = function(eventTarget,eventtype,eventHandle){//定义事件监听的对象元素,事件类型，事件函数 if(eventTarget.detachEvent){ alert("on"+eventtype); alert("on"+eventHandle); eventTarget.detachEvent("on"+eventtype,eventHandle); }else if(eventTarget.removeEventListener){ eventTarget.removeEventListener(eventtype,eventHandle,false) }else{ eventTarget["on" + eventtype] = null; } };*/ var EventUtil={ $:function(id){ return document.getElementById(id); }, but4fun:function(){ console.log(this); this.addEventHandle(); }, eventfun3:function (){ console.log(this); alert(this); delEvent(obj,evtype,fn,useCapture); } } /***使用addEventListener,attachEvent进行dom事件的监听 function addEvent(obj,evtype,fn,useCapture){ if (obj.addEventListener) { obj.addEventListener(evtype,fn,useCapture); }else if(obj.attachEvent){ obj.attachEvent("on"+evtype,function () { fn.call(obj); }); }else { obj["on"+evtype]=fn;//事实上这种情况不会存在 } } function delEvent(obj,evtype,fn,useCapture) { if (obj.removeEventListener) { obj.removeEventListener(evtype,fn,useCapture); } else if(obj.detachEvent){ obj.detachEvent("on"+evtype,fn); } else { obj["on"+evtype]=null; } } function addEvent(obj,evtype,fn,useCapture) { if (obj.addEventListener) {//优先考虑W3C事件注册方案 obj.addEventListener(evtype,fn,!!useCapture); } else {//当不支持addEventListener时(IE),由于IE同时也不支持捕获,所以不如使用传统事件绑定 if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;} //为每个事件处理函数分配一个唯一的ID if (!obj.__EventHandles) {obj.__EventHandles={};} //__EventHandles属性用来保存所有事件处理函数的引用 //按事件类型分类 if (!obj.__EventHandles[evtype]) {//第一次注册某事件时 obj.__EventHandles[evtype]={}; if (obj["on"+evtype]) {//以前曾用传统方式注册过事件处理函数 (obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加到预留的0位 //并且给原来的事件处理函数增加一个ID } obj["on"+evtype]=addEvent.execEventHandles; //当事件发生时，execEventHandles遍历表obj.__EventHandles[evtype]并执行其中的函数 } } } addEvent.__EventHandlesCounter=1;//计数器,0位预留它用 addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行 if (!this.__EventHandles) {return true;} evt = evt || window.event; var fns = this.__EventHandles[evt.type]; for (var i in fns) { fns[i].call(this); } }; /* function delEvent(obj,evtype,fn,useCapture) { if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数 obj.removeEventListener(evtype,fn,!!useCapture); } else { if (obj.__EventHandles) { var fns = obj.__EventHandles[evtype]; if (fns) {delete fns[fn.__EventID];} } } } function fixEvent(evt) {//fixEvent函数不是单独执行的，它必须有一个事件对象参数，而且只有事件发生时它才被执行！最好的方法是把它整合到addEvent函数的execEventHandles里面 if (!evt.target) { evt.target = evt.srcElement; evt.preventDefault = fixEvent.preventDefault; evt.stopPropagation = fixEvent.stopPropagation; if (evt.type == "mouseover") { evt.relatedTarget = evt.fromElement; } else if (evt.type =="mouseout") { evt.relatedTarget = evt.toElement; } evt.charCode = (evt.type=="keypress")?evt.keyCode:0; evt.eventPhase = 2;//IE仅工作在冒泡阶段 evt.timeStamp = (new Date()).getTime();//仅将其设为当前时间 } return evt; } fixEvent.preventDefault =function () { this.returnValue = false;//这里的this指向了某个事件对象，而不是fixEvent }; fixEvent.stopPropagation =function () { this.cancelBubble = true; };*/ //console.log(EventUtil.$("button3"));//返回EventUtil函数的对象属性 //EventUtil.$("button3").onclick= eventfun;//2.使用为对象事件属性赋值的方法来实现事件的监听 //EventUtil.$("button3").onclick= eventfun2;//为事件属性添加多个方法时，为后者 //EventUtil.$("button3").onclick= eventfun;//事件捕获是从事件对象逐层外父级检察一直到window对象 var EventUtil =function(){ function getByid(id){ return document.getElementById(id); }; // written by Dean Edwards, 2005 // with input from Tino Zijdel, Matthias Miller, Diego Perini // function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else { // assign each event handler a unique ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; // create a hash table of event types for the element if (!element.events) element.events = {}; // create a hash table of event handlers for each element/event pair var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; // store the existing event handler (if there is one) if (element["on" + type]) { handlers[0] = element["on" + type]; } } // store the event handler in the hash table handlers[handler.$$guid] = handler; // assign a global event handler to do all the work element["on" + type] = handleEvent; } }; // a counter used to create unique IDs addEvent.guid = 1; function removeEvent(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else { // delete the event handler from the hash table if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } } }; function handleEvent(event) { var returnValue = true; // grab the event object (IE uses a global event object) event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); // get a reference to the hash table of event handlers var handlers = this.events[event.type]; // execute each event handler for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue; }; function fixEvent(event) { // add W3C standard event methods event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; }; fixEvent.preventDefault = function() { this.returnValue = false; }; fixEvent.stopPropagation = function() { this.cancelBubble = true; }; function tableAddEvent(){ }; return{ add:addEvent, remove:removeEvent, $:getByid } }(); var outEleObj = EventUtil.$("outEle"); //addEvent.apply(EventUtil,[outEleObj,"click",eventfun3]); //EventUtil.add(outEleObj,"click",eventfun3); var inputObj = EventUtil.$("button4"); var tableEle = EventUtil.$("htmlEleTable"); var tabTrEle = tableEle.getElementsByTagName("tr"); EventUtil.add(tableEle,"click",eventfun3); for (i=0; i<tabTrEle.length; i++){ EventUtil.add(tabTrEle[i],"click",eventfun3); } EventUtil.remove(tableEle,"click",eventfun3);//事件冒删除方法 EventUtil.add(tableEle,"click",eventfun3);//事件冒泡添加方法 //EventUtil.add(inputObj,"click",eventfun3); //EventUtil.remove(outEleObj,"click",eventfun3); //console.log(addEvent); //addEvent(inputObj,"click",eventfun3,true); //delEvent(outEleObj,"click",eventfun3,false); </script> </body> </html>
PS：这里再为大家提供一个关于JS事件的在线工具，归纳总结了JS常用的事件类型与函数功能：
javascript事件与功能说明大全：
您可能感兴趣的文章: