JS——事件流与事件处理程序

1.事件流：从页面中接收事件的顺序

1.1 IE ：事件冒泡流
1.2 Netscape ：事件捕获
1.3 DOM事件流 ：事件捕获阶段——事件目标阶段——事件冒泡阶段
DOM2级事件规定 ：捕获阶段不会涉及目标事件。

2.事件处理程序

事件 ：用户或者浏览器自身执行的 某种动作
事件处理程序 ：响应某个事件的 函数 。

2.1 HTML事件处理程序

用一个与该事件处理程序同名的HTML特性来指定。

2.1.1包含要执行的具体动作

2.1.2 调用其他地方定义的脚本

2.1.3 缺点

1.时差问题：使用try-catch块捕捉错误。onclick=”try { showMessage() ;} catch(ex) {} ”
2.程序的作用域链在不同浏览器中会导致不同结果
3.HTML和JS代码耦合紧密

2.2 DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性，例如：onclick。
为事件处理程序赋值。

btn.onclick = <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params"><span class="hljs-function">(<span class="hljs-params">)<span class="hljs-function"> {
    alert( <span class="hljs-keyword">this.id );
};</span></span></span></span></span></span></span></span></span>

事件处理程序在元素的作用域中运行，this指向当前元素。
删除事件处理程序：
btn.onclick = null;

2.3 DOM2级事件处理程序

addEventListener(处理的事件名，事件处理程序函数，布尔值)；
removeEventListener(处理的事件名，事件处理程序函数，布尔值)；
布尔值：捕获阶段调用事件处理程序：true。冒泡阶段调用：false。大多数情况下用false。

btn.addEventListener(&#x201C;click&#x201D; , <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params"><span class="hljs-function">(<span class="hljs-params">)<span class="hljs-function"> {
    alert(<span class="hljs-keyword">this.id);
}, <span class="hljs-literal">false);</span></span></span></span></span></span></span></span></span></span>

好处：可以添加多个事件处理程序。事件按照添加先后顺序执行。
问题：匿名函数无法移除。
最好写成

<span class="hljs-keyword">var handler = <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params"><span class="hljs-function">(<span class="hljs-params">){
    alert(<span class="hljs-keyword">this.id);
};
btn.addEventListener(&#x201C;click&#x201D;, handler, <span class="hljs-literal">false);
btn.removeEventListener(&#x201C;click&#x201D;, handler, <span class="hljs-literal">false);</span></span></span></span></span></span></span></span></span></span></span>

2.4 IE事件处理程序

attachEvent(事件处理程序名称，事件处理程序函数)；
detachEvent(事件处理程序名称，事件处理程序函数)；

通过该方法添加的事件处理程序，都会被添加到冒泡阶段。

btn.attachEvent(&#x201C;onclick&#x201D;,<span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params"><span class="hljs-function">(<span class="hljs-params">){
    alert(&#x201C;clicked&#x201D;);
});</span></span></span></span></span></span></span>

注意：使用DOM级方法时，事件会在所属元素的作用域内运行；使用attachEvent()方法，事件处理程序会在全局作用域运行，this==window。
好处：可以添加多个事件处理程序。后添加先执行。
问题：匿名函数无法移除。

<span class="hljs-keyword">var handler = <span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">){
    alert(<span class="hljs-keyword">this.id)</span></span></span></span></span>

2.5跨浏览器事件处理程序

1.创建一个方法addHandler():区分使用哪种方法来添加事件；
2.创建一个对象EventUtil。拥有两个方法。
3.addHandler(要操作的元素，事件名称，事件处理函数)。
4.removeHandler(要操作的元素，事件名称，事件处理函数)。

var EventUtil = {
    addHandler: <span class="hljs-keyword">function(element,<span class="hljs-class"><span class="hljs-keyword"><span class="hljs-built_in">type,<span class="hljs-title">handler){
        <span class="hljs-keyword">if(element.addEventLister) {
            element.addEventListener(<span class="hljs-class"><span class="hljs-keyword"><span class="hljs-built_in">type,<span class="hljs-title">handler,<span class="hljs-title"><span class="hljs-literal">false);
        } <span class="hljs-keyword">else <span class="hljs-keyword">if(element.attachEvent) {
            element.attachEvent(<span class="hljs-string">"on"+<span class="hljs-class"><span class="hljs-keyword"><span class="hljs-built_in">type, <span class="hljs-title">handler);
        }<span class="hljs-keyword">else {
            element.[<span class="hljs-string">"on"+<span class="hljs-class"><span class="hljs-keyword"><span class="hljs-built_in">type] =handler;
        }
    },
    removeHandler: <span class="hljs-keyword">function(element,<span class="hljs-class"><span class="hljs-keyword"><span class="hljs-built_in">type,<span class="hljs-title">handler){
        <span class="hljs-keyword">if(element.addEventLister) {
            element.removeEventListener(<span class="hljs-class"><span class="hljs-keyword"><span class="hljs-built_in">type,<span class="hljs-title">handler,<span class="hljs-title"><span class="hljs-literal">false);
        } <span class="hljs-keyword">else <span class="hljs-keyword">if(element.attachEvent) {
            element.detachEvent(<span class="hljs-string">"on"+<span class="hljs-class"><span class="hljs-keyword"><span class="hljs-built_in">type, <span class="hljs-title">handler);
        }<span class="hljs-keyword">else {
            element.[<span class="hljs-string">"on"+<span class="hljs-class"><span class="hljs-keyword"><span class="hljs-built_in">type] = <span class="hljs-keyword">null;
        }
    }
};</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

使用：

EventUtil.<span class="hljs-keyword">addHandler(btn ,&#x201D;click&#x201D;,<span class="hljs-keyword">handler)</span></span>

Original: https://www.cnblogs.com/libin-1/p/7712807.html
Author: 最骚的就是你
Title: JS——事件流与事件处理程序