JavaScript绑定事件_javascript事件绑定-CSDN博客

本文详细介绍了JavaScript中事件绑定的两种方式：直接绑定和使用addEvent()函数，并阐述了这两种方式的区别及各自的特点，包括执行顺序、重复绑定处理、事件处理函数内部的this指向等问题。

转自：http://blog.csdn.net/yyh1988923/article/details/6805002

举例:

document.getElementById( " btn " ).onclick = method1;

document.getElementById( " btn " ).onclick = method2;

document.getElementById( " btn " ).onclick = method3;

如果这样写,那么将会只有medhot3被执行

写成这样：

var btn1Obj = document.getElementById( " btn1 " );

// object.attachEvent(event,function);

btn1Obj.attachEvent( " onclick " ,method1);

btn1Obj.attachEvent( " onclick " ,method2);

btn1Obj.attachEvent( " onclick " ,method3);

执行顺序为method3->method2->method1

如果是Mozilla系列，并不支持该方法，需要用到addEventListener

var btn1Obj = document.getElementById( " btn1 " );

// element.addEventListener(type,listener,useCapture);

btn1Obj.addEventListener( " click " ,method1, false );

btn1Obj.addEventListener( " click " ,method2, false );

btn1Obj.addEventListener( " click " ,method3, false );

执行顺序为method1->method2->method3

转自：http://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html

在开始学期下面几种方法之前，应当讨论一下，一个好的addEvent()方法应当达到哪些要求：

　　 a、支持同一元素的同一事件句柄可以绑定多个监听函数；

　　 b、如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册后的所有注册都被忽略；

　　 c、函数体内的this指向的应当是正在处理事件的节点（如当前正在运行事件句柄的节点）；

　　 d、监听函数的执行顺序应当是按照绑定的顺序执行；

　　 e、在函数体内不用使用 event = event || window.event; 来标准化Event对象；

一、John Resig 所写的 addEvent() 函数：http://ejohn.org/projects/flexible-javascript-events/

  
 
    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 );
     }
  
 