本文实例讲述了javascript为事件句柄绑定监听函数的方法。分享给大家供大家参考，具体如下：
在javascript中为dom元素绑定事件监听函数是一件非常常见的事情，但这里也有许多的bug。各种浏览器对于事件绑定都提供了很多方法，但可靠的只有3中：
1、传统的绑定方法：
elem.onclick = function( event ){ alert(event.type + 'this.innerhtml');};
a、传统的绑定方法，非常简单稳定，函数体内的this指向的也是指向正在处理事件的节点（如当前正在运行事件句柄的节点）。
b、一个元素的一个事件句柄只能注册一个函数，如果重复注册，会产生覆盖；而且，传统绑定方法只会在事件冒泡中运行。
2、w3c标准绑定方法：
var elem = document.getelementbyid('id');elem.addeventlistener('click' , function( event ){ alert(event.type + ' ' + this.innerhtml + 1); } , false //冒泡阶段执行);elem.addeventlistener('click' , function( event ){ alert(event.type + ' ' + this.innerhtml + 2); } , false);
a、这种绑定方法同时支持时间处理的捕获和冒泡两个阶段；同一元素的同一事件句柄可以注册多个监听函数；而且，监听函数内部this指向当前元素。
b、但是流行的ie浏览器不支持这种注册方法。
3、ie事件句柄注册方法：
var elem = document.getelementbyid('a');elem.attachevent('onclick' , function(){ alert(window.event.srcelement.innerhtml + ' ' + this.innerhtml + 1); } );elem.attachevent('onclick' , function(){ alert(window.event.srcelement.innerhtml + ' ' + this.innerhtml + 2); });
a、这种绑定方法，可以为同一事件句柄注册多次。
b、ie的事件模型不支持事件捕获；监听函数体内的this指向的不是当前于元素，而且window.event.srcelement指向的是发生事件的节点，而不是当前节点，并且在ie的事件对象中也没有等价的dom currenttarget属性。
4、跨浏览器的方法一：
function addevent(element, type, handler) { 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;};
5、跨浏览器的方法二：
function addevent( obj, type, fn ) { 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 );}
希望本文所述对大家javascript程序设计有所帮助。