事件 - 简书

1. 事件

IE的事件流是事件冒泡流
Netscape是的事件流是事件捕获流

DOM事件流：规定事件包括三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段

事件流程.jpg

document > html > body > div (点击div元素事件)
在DOM事件流中，实际的目标元素(<div>元素)在捕获阶段不会接收到事件。这就意味着在捕获阶段，事件从document到<html>到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>元素上发生，并在事件处理中被看成是冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

2. 事件处理程序：响应事件的程序。

2.1 HTML事件处理程序：会创建一个封装着元素属性值的函数。

函数中有一个局部变量event，也就是事件对象。
在函数内部，this值等于事件的目标元素。
<input type="button" name="btn" value="Click Me" onclick="showMessage(event)" />

2.2 DOM0级事件处理程序：通过Javascript指定事件处理程序的传统方式，就是将一个函数赋值给事件处理程序。

每个元素(包括window和document)都有自己的事件处理程序，如 onclick、onready，属性的值设置为一个函数，就可以指定事件处理程序。

使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此事件处理程序是在元素的作用中运行，所以 this引用当前元素。
事件对象： event
删除事件处理程序：null

var btn = document.getElementById('myBtn');
btn.onclick = function(){
  alert();
}

btn.onclick = null;//删除事件处理程序

2.3 DOM2级事件处理程序：指定和删除事件处理程序

接首3个参数：处理的事件名、处理函数、是否冒泡
node.addEventListener(eventName, fn, boolean);
node.removeEventListener(eventName, fn, boolean);
boolean:
true 捕获阶段调用事件处理程序
false 冒泡阶段调用事件处理程序

通过addEventListener()添加的事件处理程序只能用removeEventListener()移除，移除时传入的参数使用相同。意味着通过addEventListener()添加的匿名函数将无法移除。
可以添加多个事件处理程序，按照添加的顺序触发，同一个事件名也可以添加多次，按照添加的顺序执行。
一般情况下都是将事件事件处理程序添加到冒泡阶段false，可以最大限度的兼容各种浏览器。

    <button type="button" id="btn">Click Me</button>
    <script type="text/javascript">
        "use strict"
        var btn = document.getElementById('btn');
        //事件不能取消，事件处理程序为匿名函数
        btn.addEventListener('click', function(event){
            console.log(this, event);//先执行1
        }, false);
        btn.addEventListener('click', function(event){
            console.log(this, event);//后执行2
        }, false);
    </script>

2.4 IE事件处理程序

接受两个相同的参数： 事件名、处理函数
attachEvent(eventName, fn);
detachEvent(eventName, fn);

IE8及更早版本只支持事件冒泡，所以事件处理程序都会被添加到冒泡阶段。
事件名是以on开头（与DOM级事件处理程序事件名一样，如onclick）。
IE事件处理程序会在全局作用域中执行，this指向window。
添加多个事件处理程序，以相反的顺序触发。

<button type="button" id="btn">Click Me</button>
<script type="text/javascript">
  "use strict"
  var btn = document.getElementById('btn');
  var handler = function(){
    alert(this);//IE事件作用域全局，this === window
  }
  btn.attachEvent('onclick', handler);//事件处理程序使用匿名函数将不能删除事件
  btn.attachEvent('onclick', handler);
  btn.detachEvent('onclick', handler);//删除事件处理程序，参数必须完全相同
</script>

view
2.window对象
1.window对象

2.5 跨浏览器事件处理程序

    <script type="text/javascript">
        var EventUtil = {
            addHandler: function(elem, type, handler){
                if (elem.addEventListener) { //DOM2级
                    elem.addEventListener(type, handler, false);
                }else if(elem.attachEvent) { //IE事件处理程序
                    elem.attachEvent("on" + type, handler); //兼容IE8及以下，加上on前缀
                }else{ //DOM0级
                    elem["on" + type] = handler;
                }
            },
            removeHandler: function(elem, type, handler){
                if (elem.removeEventListener) { //DOM2级
                    elem.removeEventListener(type, handler, false);
                }else if(elem.detachEvent) { //IE事件处理程序
                    elem.detachEvent("on" + type, handler); //兼容IE8及以下，加上on前缀
                }else{ //DOM0级
                    elem["on" + type] = null;
                }               
            }
        }
    </script>

3. 事件对象

所有浏览器都支持event对象。

** 3.1 DOM级事件对象**

currentTarget: this始终等于currentTarget，正在处理事件的元素。
preventDefault(): event.preventDefault()阻止特定事件的默认行为.
cancelabel: 设置为true，才可以使用preventDefault()来取消默认行为。
stopPropagation(): 立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。
eventPhase: 事件处理处于哪个阶段（1:捕获阶段， 2:目标阶段，3:冒泡阶段）

事件

1. 事件

DOM事件流 ：规定事件包括三个阶段：

2. 事件处理程序：响应事件的程序。

3. 事件对象

推荐阅读更多精彩内容

DOM事件流：规定事件包括三个阶段：