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

前言：js是事件驱动语言

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

2、事件的分类

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

3、事件的绑定方法

     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出来的对象，不一样的匿名函数不是同一个对象，固然这个也是事件绑定的好处

　　 添加事件监听

1 function addHandler(obj,type,handler) {
2     if ( obj.addEventListener ) {
3         obj.addEventListener ( type, handler, false );
4     } else if ( obj.attachEvent ) {
5         obj.attachEvent ( "on" + type, handler );
6     } else {
7         obj["on" + type] = handler;
8     }
9 }

 　　移除事件监听

1 function removeHandler(obj,type,handler) {
2     if ( obj.removeEventListener ) {
3         obj.removeEventListener ( type, handler, false );
4     } else if ( obj.detachEvent ) {
5         obj.detachEvent ( "on" + type, handler );
6     } else {
7         obj["on" + type] = null;
8     }
9 }

（2）jquery实现事件监听

 

3.事件委托

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

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

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