事件冒泡 事件监听 事件委托 事件绑定 事件代理

前言：js是事件驱动语言

一、事件驱动
    1.事件
      javascript侦测到的用户的操作或是页面的一些行为(怎么发生的)
    2.事件源
      引发事件的元素。(发生在谁的身上)
    2.事件处理程序
      对事件处理的程序或是函数 (发生了什么事)

二、事件的分类

　　鼠标事件。键盘事件、表单事件、页面事件、DOM事件等等

三、事件的绑定方法

     1.直接在HTML元素绑定，在标签后加onclick=function(){}等

　  2.在js脚本中绑定，获取元素后绑定事件

　  3.DOM绑定，添加事件监听

　　　　第一种无法删除，不好维护

　　　　第二种也无法删除，维护性一般

　　　　第三种可以删除，维护性一般

 

1.事件冒泡

在类似 body > div > a 这样的结构中，如果单击a元素，click事件会从a一直冒泡到div和body（即document对象）。因此，发生在a上面的单击事件，div和body元素同样可以处理

利用冒泡的原理，把事件添加到父级上，父级也会有这个方法来执行触发效果

 　　(1) 当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法

　　

2.事件监听

　　(1)原生实现事件监听，兼容IE、ff、chrome、另attachEvent是IE专有属性

　　个人的理解：

　　一般情况下是不需要捕获的，事件捕获是把整个操作系统里所有的当前发生的事件都绑定上这里

　　如果绑定的是一个匿名函数则无法解除绑定，因为函数是一个new出来的对象，不同的匿名函数不是同一个对象，当然这个也是事件绑定的好处

　　 添加事件监听

function addHandler(obj,type,handler) {
    if ( obj.addEventListener ) {
        obj.addEventListener ( type, handler, false );
    } else if ( obj.attachEvent ) {
        obj.attachEvent ( "on" + type, handler );
    } else {
        obj["on" + type] = handler;
    }
}

 　　移除事件监听

function removeHandler(obj,type,handler) {
    if ( obj.removeEventListener ) {
        obj.removeEventListener ( type, handler, false );
    } else if ( obj.detachEvent ) {
        obj.detachEvent ( "on" + type, handler );
    } else {
        obj["on" + type] = null;
    }
}

（2）jquery实现事件监听

 

3.事件委托

利用事件传播（这里是冒泡）这个机制，就可以实现事件委托。具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）

　　(1)jQuery的 bind() 方法，使用.bind()方法只会给第一页中的50个单元格绑定单击事件，动态加载的后续页面中的单元格都不会有这个单击事件。换句话说，.bind()只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件

　　(2)jQuery的 live()方法，这里的.live()方法会把click事件绑定到$(document)对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要原因，稍后再详细讨论），而且只需要给$(document)绑定一次（不是50次，更不是5000次），然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序