JavaScript DOM 事件处理程序总结

一、注册方式：

1) 设置 JavaScript 对象属性为事件处理程序

     // 设置 Window 对象的 unload 属性为一个函数

     window.onload = function() {

         //查找一个<form>元素

         var elt = document.getElementById("formId");

         //注册事件处理程序，在表单提交之前调用它

         elt.onsubmit = function() { return validate(this); }

    }

2) 设置 HTML 标签属性为事件处理程序

     <botton οnclick="alert('Thank you');">点击这里</botton>     

3) addEventListener() (IE9后的IE浏览器，以及所有现代浏览器)

     var b = document.getElementById("mybotton");

     b.addEventListener("click", function() {alert("Thank you");}, false};

4) attachEvent()(针对 IE6、7、8)

     var b = document.getElementById("mybotton");

     b.attachEvent("onclick", function() {alert("Thank you");}};

二、 addEventListener() 与 attachEvent() 的区别:

1) addEventListener() 的第一个参数不需要带事件类型的前缀"on"，attachEvent() 则需要；

2) addEventListener() 支持事件捕获(第三个参数为 true 时，即是捕获类型事件)，attachEvent() 则不支持；

3) addEventListener() 不允许使用相同的参数在同一个对象上多次注册(相当于覆盖了之前的注册，处理程序仍然只注册一次，同时重复调用也不会改变调用处理程序的顺序)；      attachEvent() 允许使用相同的参数注册多次(当特定的事件类型发生时，注册函数的调用次数和注册次数一样)。

4) 注销 addEventListener() 要用 removeEventListener()，注销 attachEvent() 要用 detachEvent()。

三、事件处理程序的参数：

        function handler(e) {

    var event = e  || window.event;

            // 处理程序代码

       }

1) 对象属性注册事件处理程序：IE6、7、8   event 为 window.event ，IE9后以及所有现代浏览器 event 为 e；

2)HTML 属性注册事件处理程序： event 只能为 window.event;

3) attachEvent() : event 可以是 e，也可以是 window.event(即传递了事件对象，也可以使用 window 的 event 对象)；

4) addEventListener(): event 可以是 e，也可以是 window.event(即传递了事件对象，也可以使用 window 的 event 对象)

四、事件处理程序的运行环境：

1) 对象属性注册事件处理程序：this 关键字指的是事件目标；

2) HTML 属性注册事件处理程序： this 关键字指的是事件目标，但如果将 HTML 属性指向一个事件，那么在那个事件处理函数中，this 指向 window：

     a. οnclick="alert(this);"  this 指向事件目标；

     b. function handler() {

     alert(this); // this 指向 window

         }

         οnclick="handler()"  //其实就是 οnclick="window.handler()"

3) attachEvent() : this 关键字指的是全局 (window) 对象；

4) addEventListener() : this 关键字指的是事件目标

五、事件处理程序的作用域

1) 对象属性注册事件处理程序： 遵循 JavaScript 词法作用域；

2) attachEvent()： 遵循 JavaScript 词法作用域；

3) addEventListener()： 遵循 JavaScript 词法作用域；

4) HTML  属性注册事件处理程序：通过 HTML 属性来注册事件处理程序是一个列外。它们被转换为能存取全局变量的顶级函数而非任何本地变量。但因为历史原因，它们运行      在一个修改后的作用域链中:

     function(event) {

 with(document) {

     with(this.form || {}) {

         with(this) {

     // 事件处理程序的代码

                 }

              }

          }

     }

六、事件处理程序的返回值(只对通过对象属性或 HTML 属性注册的处理程序才有意义)

返回 false 就是告诉浏览器不要执行这个事件相关的默认操作(比如表单提交按钮的 onclick 事件处理程序能返回 false 阻止浏览器提交表单)；

七、调用顺序

1) 通过设置对象属性或 HTML 属性注册的处理程序一直优先调用；

2) 使用 addEventListener() 注册的处理程序按照他们的注册顺序调用；

3) 使用 attachEvent() 注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序。

八、事件传播

1) 发生在文档元素上的大部分事件都会冒泡，值得注意的例外是 focus、blur 和 scroll 事件；

2) 文档元素上的 load 事件会冒泡，但它会在 Document 对象上停止冒泡而不会传播到 Window 对象。

关于取消事件默认行为和取消事件传播的传送门：

http://blog.youkuaiyun.com/tedpenk/article/details/22198209