javascript事件机制详解

什么是事件？

　　直观的说就是网页上发生的事情，按照我的归纳来说就是：动作、变化、加载完成。具体来说就是鼠标点击某些内容，经过某些元素，键盘按下按键，web页面加载完成，以及浏览器窗口大小变化，滚动条滚动......

　　事件是构成动态网页交互必不可少的条件，通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

javascript的三种事件模型（原始，IE，DOM2）

1.原始事件模型　　

　　其事件类型分为 “输入事件（如onclick）” 和“语义事件（如onsubmit）”。

　　通过javascript指定原始事件处理程序的方式，就是将一个函数值赋值给一个事件处理程序属性，每个元素（包括window 和 document）都有自己的事件处理程序属性，这些程序通常全部小写（如：onclick）。将这些属性的值设置成一个函数，即可指定事件处理程序。如下所示：

var test1 = document.getElementById("test1");
test1.onclick = function(){
    alert("绑定点击事件");
}

 　或者直接通过JS代码作为HTML性质值完成事件绑定：

<a id="test1" href="javascript:void(0)" onclick="alert('点击事件绑定')">test1</a>

　　通过给当前元素的属性指定事件处理程序，是在当前元素的作用域中运行，因此程序中的this引用的是当前元素，再看个例子：

 var test1 = document.getElementById("test1");
 test1.onclick = function(){
      alert(this.id); //"test1"
 }

　　因为事件的处理程序是作为JS的属性，因此可以使用JS属性显式调用:

document.getElementById("test1").onclick();//窗口弹出对话框："点击事件绑定"

　　因为事件的处理程序是作为JS的属性,因此也可以通过将属性值设置为null 的方式来达到删除事件程序的目的

document.getElementById("test1").onclick = null ;  //删除点击事件

　*优点：所有浏览器都兼容

　*缺点：1）逻辑与显示没有分离；

　　　　2）相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的，如：a.onclick = func1; a.onclick = func2;将只会执行func2中的内容。

　　　　3）无法通过事件的冒泡、委托等机制 完成更多事情。

　　　　在当前web程序模块化开发以及更加复杂的逻辑状况下，这种方式显然已经落伍了，所以在真正项目中不推荐使用，平时写点博客小例子啥的倒是可以，速度比较快。

IE事件模型

　　在IE事件模型中，事件的表示作为全局函数window的一个属性event。在ie中（ie8及更早），默认的全局属性event值为null，然后在进入事件处理程序中时，系统将window.event 的值设置为当前事件类型，并且在每次事件处理完成之后 又将window.event 的值设置成null。为了求证，我们在IE8下运行如下代码：

console.log(window.event); //null 
window.onload = function(){
    console.log(window.event) // Event {isTrusted: true, type: "load", target: document, currentTarget: Window, eventPhase: 2…}
    setTimeout(function(){console.log(window.event);},100) //null
}

　　因此我们可以得知

　　　　1.在html运行时，window.event 被定义，初始值为null。

　　　　2.在我们进入window.onload 函数中时，window.event 的值为当前类型的事件。

　　　　3.当我们完成事件过程后，window.event 又被设置为null。

　　IE的事件模型执行过程只有两步，对应DOM2事件的 2(事件处理),3(事件冒泡) 阶段。先执行元素的监听函数，然后事件沿着父节点一直冒泡到document。

　　IE模型下的事件绑定方式与DOM不同，绑定监听函数的方法是：attachEvent( "eventType","handler")，其中evetType为事件的类型，如onclick，注意要加’on’。解除事件监听器的方法是 detachEvent("eventType","handler" )

　　与原始事件模型在当前元素上定义事件不同，使用attachEvent()方法的情况下，事件的处理程序会在全局作用域中运行，因此 this 等于 window。

/*IE*/
var test1 = document.getElementById("test1");
test1.attachEvent("onclick",function(){
    alert(this === window); //true
})
//attachEvent 方法可以为一个元素添加多个事件处理程序，后添加的先执行
test1.attachEvent("onclick",function(){
    alert("helloWord"); //先helloWord后true
})

　　*IE的事件模型已经可以解决原始模型的三个缺点，但其自己的缺点就是兼容性，只有IE系列浏览器才可以这样写。

DOM2事件模型（标准）

　　此模型是W3C指定的标准模型，因此我们现在使用的现代浏览器（IE6~IE8 除外），都遵循标准事件模型，在DOM2模型中事件有一个特殊的传播过程,分为三个阶段: 

　　　　(1)capturing phase:事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。

　　　　(2)target phase:事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数.

　　　　(3)bubbling phase:事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。

　　所有的事件都会经历事件捕获阶段(capturing phase)，但是只有部分事件会经历事件冒泡(bubbling phase),例如：submit就不会被事件冒泡。

　　“DOM2事件模型”，定义了两个方法用来指定和删除事件处理程序：

　　　　addEventListener("eventType","handler","true|false");和 removeEventListner("eventType","handler","true!false");

　　　　其中eventType指事件类型，注意不要加‘on’前缀，与IE下不同。第二个参数是处理函数，第三个即用来指定是否在捕获阶段进行处理，一般设为false来与IE保持一致。

var test1 = document.getElementById("test1");
test1.addEventListener("click",function(e){
    console.log(e);  //MouseEvent
    console.log(this); //当前监听的元素 test1对应的标签
},false)

　　*当我们了解了事件的三种模型之后，我们发现他们种会存在区别。为了更好的兼容各种浏览器版本，并且保证代码能在大多数浏览器下一致地运行，我们只需要关注冒泡阶段，并且整理一份跨浏览器的事件处理程序：

var EventUtil = {
    /**
     * 添加事件
     * @param {Object} element
     * @param {Object} type
     * @param {Object} hander
     */
    addHander: function(element, type, hander) {
        if (element.addEventListener) {
            element.addEventListener(type, hander, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, hander);
        } else {
            element["on" + type] = hander;
        }
    },
    /**
     * 移除事件
     * @param {Object} element
     * @param {Object} type
     * @param {Object} hander
     */
    removeHander: function(element, type, hander) {
        if (element.removeEventListener) {
            element.removeEventListener(type, hander, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, hander);
        } else {
            element["on" + type] = null;
        }
    },
    /**
     * 取得当前事件对象
     * @param {Object} event
     */
    getEvent: function(event) {
        return event ? window.event : event;
    },
    /**
     * 取得触发事件的目标元素对象
     * @param {Object} event
     */
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    /**
     * 阻止默认的事件触发
     * @param {Object} event
     */
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    /**
     * 阻止事件冒泡
     * @param {Object} event
     */
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

 e.target与e.currentTarget

　　前文多次使用到事件(event)的target 属性，这里不得不提到与之相类似的 currentTarget属性，那么他们分别代表什么，并且有什么作用和区别？下面我们先看《javascript高级程序设计》中对着两个属性的说明：

属性/方法	类型	读/写	说明
target	Element	只读	事件的目标
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素

　　在事件处理程序内部，对象的this始终等于currentTarget的值，而target则只包含事件的实际目标。如果将事件处理程序指定给了目标元素，则 this、currentTarget、target 包含相同的值。如下例子：

<div id="btnPanel" style="background: #ccc;padding: 40px;">
    <input type="button" name="btn" id="btn" value="确定" />
</div>

var btn = document.getElementById("btn");
btn.onclick = function(event) {
    alert(event.currentTarget === this); //true
    alert(event.target === this); //true
}

　　由于 click 事件的目标是按钮，并且我们将点击事件的处理也是指定给了按钮。因此 currentTaget 、target 、 this 值相等。

　　思考：如果我们将 click 事件绑定到 按钮父容器上，那么我们在点击按钮，由于事件冒泡 触发父容器 click事件时。 这三者有什么变化？修改上面js部分代码如下:

var btnPanel = document.getElementById("btnPanel");
btnPanel.onclick = function(event) {
    alert(event.currentTarget === btnPanel); //true
    alert(this === btnPanel);  //true
    alert(event.target === document.getElementById("btn")); //true
}

　　当我们点击这个例子中的按钮时，this和currentTarget 都等于 这个div，因为事件处理程序是注册到这个div上的 。 最终 target 等于按钮元素，是因为 我们在点击按钮时，由于按钮上没有注册 click 事件处理程序， 结构 click 事件就冒到了 父容器div 并触发了click。这个按钮 是 click 事件的真正目标。

　　*总结：通过如上两个例子，我们可以这样理解：

　　　1.target 永远 等于 事件的真正目标 （如click事件中，target永远等于我们鼠标点击的最上层元素）;

　　　2.currentTaget 始终等于this。等于 事件处理程序绑定的这个元素。（如: 谁.onclick = hander, “谁”就是currentTaget,也就是最终要冒泡到“谁”上触发事件的元素）;

取消事件冒泡(stopPropagation)和取消事件的默认行为(preventDefault)

　　stopPropagation() 方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获和冒泡。　

var btn = document.getElementById("btn");
btn.onclick = function(event) {
    alert("click for btn"); 
    event.stopPropagation();
}

var btnPanel = document.getElementById("btnPanel");
btnPanel.onclick = function(event) {
    alert("click for div"); 
}

　　和之前例子的不同是，我们在btn和div上都绑定了click事件，并且我们在btn的事件程序中调用event.stopPropagation()。当我们点击按钮时，页面只弹出一个提示框“click for btn”,是由于我们在进入btn的事件时，阻止了事件在dom中的传播，因此不会触发 div上绑定的点击事件。如果去掉event.stopPropagation()，则弹出两个提示对话框 先触发 btn事件，再经由事件冒泡 触发div事件。

　　只有cancelable 属性为true的事件，才可以使用preventDefault() 来取消其默认行为。

<form action="http://www.baidu.com" method="post">
    <a id="baiduA" href="http://www.baidu.com">百度</a>
    <input id="submitBtn" type="submit" value="提交"/>
</form>

　　我们都知道，a标签在点击的时候 会触发默认的跳转事件，在form中点击submit类型按钮，会自动post并且跳转到action指定的页面。我们现在要求，点击a标签或者submit按钮时，只提示 不做跳转 或者 提交。使用preventDefault();取消其默认事件的行为：

var subBtn = document.getElementById("submitBtn");
subBtn.onclick = function(e){
    alert("subBtn");
    e.preventDefault();
}

var baiduA = document.getElementById("baiduA");
baiduA.onclick = function(e){
    alert("baiduA");
    e.preventDefault();
}

 　　注：在IE事件对象中，也有取消默认事件，和阻止事件冒泡的属性。

　　　　window.event.cancelBubble = true 对应 stoppropagation();

 　　　  window.event.returnValue  = false 对应 preventDefault();

从模拟事件浅谈dispatchEvent

事件经常有用户操作火通过其他浏览器的功能来触发，比如点击某些按钮，输入某些值等等，但是，在一些特定的情况下，我们需要我们的事件在任意时刻都能通过javascript来触发。并且某些事件还是我们自己定义的，这个时候我们可以使用IE下fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。

例如在ie下看看这个例子：

//document上绑定自定义事件ondataavailable
document.attachEvent('ondataavailable', function(event) {
    alert(event.eventType);
});
var obj = document.getElementById("obj");
//obj元素上绑定click事件
obj.attachEvent('onclick', function(event) {
    alert(event.eventType);
});
//调用document对象的createEventObject方法得到一个event的对象实例。
var event = document.createEventObject();
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.fireEvent('ondataavailable', event);
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function() {
    obj.fireEvent('onclick', event);
};

再看看高级浏览器（chrome,firefox等）的例子：

//document上绑定自定义事件ondataavailable
document.addEventListener('ondataavailable', function(event) {
    alert(event.eventType);
}, false);
var obj = document.getElementById("obj");
//obj元素上绑定click事件
obj.addEventListener('click', function(event) {
    alert(event.eventType);
}, false);
//调用document对象的 createEvent 方法得到一个event的对象实例。
var event = document.createEvent('HTMLEvents');
// initEvent接受3个参数：
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
event.initEvent("ondataavailable", true, true);
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent('HTMLEvents');
event1.initEvent("click", true, true);
event1.eventType = 'message';
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function() {
    obj.dispatchEvent(event1);
};

在以上两个例子中，我们都会发现，在事件触发的时候，我们需要对触发的方法传一个事件对象进去，并且这个事件对象使我们通过js自己创建的。

在ie 中为：document.createEventObject();

在常规浏览器中：document.createEvent('HTMLEvents');

createEvent()方法返回新创建的Event对象，支持一个参数，表示事件类型，具体见下表：

参数	事件接口	初始化方法
HTMLEvents	HTMLEvent	initEvent()
MouseEvents	MouseEvent	initMouseEvent()
UIEvents	UIEvent	initUIEvent()

　对于标准浏览器，其提供了可供元素触发的方法：element.dispatchEvent(). 不过，在使用该方法之前，我们还需要做其他两件事，及创建和初始化。因此，总结说来就是：

document.createEvent()
event.initEvent()
element.dispatchEvent()

　*总结，对于事件的触发，dispatchEvent 或者 fireEvent 也只是了解了对事件触发的调用方式，本篇不作过多的介绍。应该会在之后单独起一篇，事件模拟，自定义事件的文章。

 事件代理

javascript事件是所有网页互动性的根本，因此在我们编写前端交互的时候，事件绑定作为再普通不过的交互操作了。在传统的事件处理中，你根据需求给每一个元素添加或者 删除事件处理器，然而事件处理器可以导致内存泄露或者性能下降（你用的越多风险越大）。例如以下例子

一：当我们点击每个li时，控制台打出 当前点击元素的 innerHtml　

1 <ul id="ul">
2   <li>aaaaaaaa</li>
3   <li>bbbbbbbb</li>
4   <li>cccccccc</li>
5 </ul>

 传统的做法：为每个li绑定点击事件：

1 window.onload = function(){
2     var ul = document.getElementById("ul");
3     var lis = ul.getElementsByTagName("li");
4     for(var i = 0 ; i < lis.length; i ++){
5         lis[i].onclick = function(){
6             console.log(this.innerHTML);
7         }
8     }
9 }

这样我们就可以做到li上面添加鼠标事件，但是如果说我们可能有很多个li用for循环的话就比较影响性能。

实际开发情况中，我们的li大多数是根据数据集合，动态组装生成的。此时就需要我们每生成一个li 就给这个li 绑定一个点击事件。效率低，容易出错

思考：1.有没有一种可行的方法让我每次只需完成一次事件绑定的操作？

　　　2.或者我在li的父容器上，加入某种事件，让我在每次点击li时，由父容器的事件判断我当前点击的哪个li元素，并执行特定的操作？

答：事件代理。

下面我们可以用事件代理的方式来实现这样的效果。html不变

 1 window.onload = function(){
 2     var ul = document.getElementById("ul");
 3     var lis = ul.getElementsByTagName("li");
 4     
 5     ul.onclick = function(e){
 6         /*
 7         这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
 8         ie：window.event.srcElement
 9         标准下:event.target
10         nodeName:找到元素的标签名
11         */
12         var e  = e || window.event;
13         var target = e.target || e.srcElement;
14         if(target.nodeName.toUpperCase() == "LI"){
15             alert(target.innerHTML);
16         }
17     }
18 }

这样，我们就使用事件代理完成在父容器绑定点击事件，当我们点击子元素li时，根据事件源得到当前点击的target元素。这样就算li是动态生成的，在点击的时候也会去获取到新的节点li。并执行对应操作。

原理：事件冒泡以及目标元素。当一个元素的事件被触发时，同样的事件将会在这个元素的所有祖先元素中被触发，这一过程称之为事件冒泡。这个事件从原始元素一直冒泡到dom树最上层。并且所有的事件触发的目标元素都是最开始的元素（target || srcElement）因此我们可以根据这一原理来达到触发原始元素事件的目的。

这样做的好处：

　　1.将所有同类元素的事件操作代理给其父元素，减少了事件绑定过程，避免了100个li，1000个li 或者更多li的循环绑定事件，有效减少内存占用，避免元素过多导致浏览器内存泄露，提高效率。

　　2.在DOM更新后无须重新绑定事件处理器了。

接下来我们利用事件代理封装一个通用的方法：

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css" rel="stylesheet">
            p,
            h3 {
                width: 200px;
                height: 100px;
                border: 1px solid pink;
                margin: 20px auto;
            }
        </style>
    </head>

    <body>
        <div id="pElement">
            <p>p的点击事件</p>
            <h3>h3的双击事件</h3>
        </div>
    </body>
</html>

var pElement = document.getElementById('pElement');
//事件代理整理
EventTarget.prototype.on = function(eventType, selector, callback) {
    var _event = function(e) {
        var target = event.target || event.srcElement;
        if (target === selector) {
            callback(e);
        }
    }
    if (this.addEventListener) {
        this.addEventListener(eventType, _event, false);
    } else if (this.attachEvent) {
        this.attachEvent("on" + eventType, _event);
    } else {
        this["on" + eventType] = _event;
    }
}

//可扩展的选择器 添加id class 属性等筛选
function _getTarget(targetName) {
    return document.getElementsByTagName(targetName)[0];
}

//给p元素绑定点击事件
pElement.on('click', _getTarget("p"), function(e) {
    alert(e.target.innerText)
});

//给h3 绑定双击事件
pElement.on('dblclick', _getTarget("h3"), function(e) {
    alert(e.target.innerText)
});