javascript事件

一、事件绑定

javascript的事件绑定可以有多种方式

1.HTML事件处理程序

直接在HTML元素中，显式地为元素绑定事件：

<button onclick="func()"></button>

这种方式的移除事件的处理程序方式是，将事件函数置空。

func = function() {}

2.DOM0级处理事件程序

把一个函数赋值给事件处理函数。

element.onclick= function() {
    doSomething();
}

这种方式的移除事件程序是，将程序处理事件置位null;

element.onclick = null;

3.DOM2级事件处理程序

通过事件监听的方式来绑定事件

element.addEventLisstener('click',function() {
    doSomething();
},false);

第一个参数为绑定的事件名称；第二个参数为事件处理函数；第三个参数为指定事件冒泡（false）还是事件捕获（true），默认是false，即为时间冒泡方式。
这种事件绑定的移出方式是remove

element.removeEventListener('click',function() {},false);

我们可以给一个元素添加多个事件处理程序，这些绑定的事件的执行顺序与定义的顺序一一对应。

4.IE的事件处理程序

IE有自己的事件绑定方式，与前面的事件监听有所差异

element.attachEvent('onclick',function() {
    doSomething();
});

IE的事件绑定函数只有两个参数，因为在IE中，它只支持事件冒泡方式。还有，它的事件名前面都有加上一个’on’。
它的事件移出方式为：

element.detachEvent('onclick',function() {
    doSomething();
});

二、事件捕获和事件冒泡

1.事件捕获

事件首先发生在DOM树的最高层对象(document)，然后往事件触发的发个元素一层层传递。如点击a标签：document –> html –> body –> a

2.事件冒泡

事件触发的元素首先接收到事件，然后依次向上传递，直到最高层对象接收到事件。如：a –> body –> heml –> document

对于这两种事件接收方式，如果希望只一次事件触发，就能在整个DOM树上都得到响应，那么选择用事件冒泡方式；如果只希望在目标元素中触发事件，那么就阻止事件冒泡（也不是所有事件都能冒泡，如blur、focus、load事件都不支持事件冒泡）。

3.阻止事件冒泡

阻止事件冒泡的方式有两种：
w3c标准：event.stopPropagation（）；
IE中：event.cancelBubble();

三、事件委托

事件委托也称事件代理是指：当事件被推到更上层的父节点时，通过检查事件目标对象（target）来判断并获取事件源。
当我们需要给很多同级元素添加事件的时候，我们可以通过将事件绑定到它们的父节点上，从而将事件委托给父节点去出发事件处理函数。

• 给ul标签下的li添加处理事件。

$ul.onclick = function(e) {
    if(e.target.id = "$li") {
        doSomething();
    } 
    if(e.target.class = "someli") {
        doSomething();
    }
}

这样做的优点是：
1.管理的函数变少了，不需要为每个元素都添加监听函数
2.可以方便的添加和修改元素，不需要因为元素的改动而修改事件绑定。新添加的子元素也在父节点中，只要给它们添加相同的标记就可以接收事件。
3.javascript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏问题。