DOM 事件

JS 与 HTML 之间的交互是通过事件来实现的。DOM 事件，就是文档或浏览器窗口中发生的一些特定交互瞬间，可使用侦听器（或处理程序）预定事件，以便事件发生时执行相应的代码。

事件的注册与触发

[1] 事件注册 eventTarget.addEventListener(type,listener[,useCapture])

该方法接受 3 个参数：事件类型？！、事件处理函数？！、是否捕获(可选，true / false)

// 步骤一：eventTarget（DOM元素），即事件的主体
   var elem = document.getElementById("div1");

// 步骤二：事件处理函数（即，侦听器）
   var clickHandler = function(){};
// 步骤三：注册绑定
   // 方法1:
   elem.addEventListener('click',clickHandler,false);   
   // 方法2:
   elem.onclick = clickHander;           // 缺陷：事件处理函数只有一个,后一个会覆盖前一个

// 步骤一：eventTarget（DOM元素），即事件的主体

var elem = document.getElementById("div1");

// 步骤二：事件处理函数（即，侦听器）

var clickHandler = function(){};

// 步骤三：注册绑定

// 方法1:

elem.addEventListener('click',clickHandler,false);

// 方法2:

elem.onclick = clickHander; // 缺陷：事件处理函数只有一个,后一个会覆盖前一个

[ 取消事件注册 ] eventTarget.removeEventListener(type,listener[,useCapter])

elem.removeEventListener('click',clickHandler,false); 或 elem.onclick = null; // 不建议

1
2
3

elem.removeEventListener('click',clickHandler,false);

或 elem.onclick = null; // 不建议

[ 事件委托？！] 事件默认处理冒泡过程。由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法就叫做事件代理或事件委托。

事件代理应用事件目标的 target 和 srcElement 属性完成，利用事件代理，可以提高性能及降低代码复杂度。

[2] 事件触发 eventTarget.dispatchEvent(type)

～的方式有很多种，如，点击一个元素、点击一个按钮 ... 这里主要介绍如何使用代码进行触发，即「事件模拟？！」

简单来说，事件模拟，是用来触发自定义的事件函数的，而不是触发浏览器默认行为。

elem.dispatchEvent('click')

1	elem.dispatchEvent('click')

[ 事件对象？！] 事件被触发时，会调用事件处理函数并传入一些信息，这些信息代表了当前事件的状态，即事件对象。换句话说，当调用事件处理函数时，引擎会传入一个对象，对象就含有了事件的状态和信息。

低版本浏览器的兼容（ IE8 - ）

事件注册与取消 attchEvent / detachEvent

事件触发 fireEvent(e)

no capture（IE低版本中没有捕获过程）

// 事件注册
   var addEvent = document.addEventListener ?
	function(elem,type,listener,useCapture){
	   elem.addEventListener(type,listener,useCapture);
        }:
        function(elem,type,listener,useCapture){
	   elem.attachEvent('on'+type,listener);
        }

// 取消事件注册
   var delEvent = document.removeEventListener ?
	function(elem,type,listener,useCapture){
	   elem.removeEventListener(type,listener,useCapture);
        } :
        function(elem,type,listener,useCapture){
	   elem.detachEvent('on'+type,listener);
        }

// IE低版本中，事件类型前需要加上 on
// IE低版本没有捕获阶段，所有useCapture没有意义

// 事件注册

var addEvent = document.addEventListener ?

function(elem,type,listener,useCapture){

elem.addEventListener(type,listener,useCapture);

function(elem,type,listener,useCapture){

elem.attachEvent('on'+type,listener);

}

// 取消事件注册

var delEvent = document.removeEventListener ?

function(elem,type,listener,useCapture){

elem.removeEventListener(type,listener,useCapture);

} :

function(elem,type,listener,useCapture){

elem.detachEvent('on'+type,listener);

}

// IE低版本中，事件类型前需要加上 on

// IE低版本没有捕获阶段，所有useCapture没有意义