js-事件

　　事件流描述的是 从页面中接收事件的顺序。

　　现在浏览器中最常用的是 事件冒泡 事件流：由最具体的元素元素，然后逐级向上传播到较为不具体的节点。

　   DOM0级事件处理程序

　　　　即将一个函数赋值给一个事件处理程序属性。

　　　　document.getElmentById("myBtn").onclick=function() {  console.log(this); }

　　DOM2级事件处理程序

　　　　DOM2级事件流规定的事件流包括三个阶段：

 

　　　　1、事件捕获阶段（为截获事件提供了机会）；

 

　　　　2、 处于目标阶段（实际的目标接收到事件）；

 

　　　　3、事件冒泡阶段（可以在这个阶段对时间做出响应）；

 

　　　　事件处理程序的名字以 "on"开头，因此click事件的事件处理程序是 onclick。

 

　　　　DOM2级事件定义了两个方法，用于指定和删除事件处理程序的操作：　　　　　　

　　　　　　addEventLister() 与 removeEvenListener()。

　　　  所有的DOM节点都包含这两个方法。

　　　 看看定义 

/**
@param {string} type
@param {EventListener|Function} listener
@param {boolean} [useCapture = false]
*/
EventTarget.prototype.addEventListener = function(type,listener,useCapture) {};
/**
@param {string} type
@param {EventListener|Function} listener
@param {boolean} [useCapture = false]
*/
EventTarget.prototype.removeEventListener = function(type,listener,useCapture) {};

 

　　　如果 useCapture是true，则表示在捕获阶段调用事件处理程序，否则，表示在冒泡阶段调用事件处理程序。　　

    var btn=document.getElementById("btn");
    var handler=function(){
        console.log(this.value);
    };
    btn.addEventListener("click",handler,false);
    function removeHandler() {
        btn.removeEventListener("click", handler, false);
    }

　　如果用 addEventListener增加了一个事件，那么，则必须用removeEventListener去删除这个事件，且事件处理程序，两者必须相同。

　　大部分情况，将事件处理程序添加到事件流的冒泡阶段，最大限度兼容各种浏览器。 

　　如果对同一对象添加了相同的事件，则按添加的的顺序执行。

 

　IE的事件处理程序

　　 低版本的IE是不支持事件捕获阶段的。

　　 IE实现了与DOM中类似的两个方法：attachEvent与detachEvent；

      原型如下：

/**
@browser IE
@param {string} type
@param {Function} listener
*/
HTMLElement.prototype.attachEvent = function(type,listener) {};
/**
@browser IE
@param {string} type
@param {Function} listener
*/
HTMLElement.prototype.detachEvent = function(type,listener) {};

 

　　 使用attachEvent为同一对象添加了两个不同的事件处理程序，则以相反的顺序执行。

 

　　还有一点有趣的事：使用DOM0级方法，事件处理程序会在其所属元素的作用域内运行，而attachEvent会在全局作用域中运行。