原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一、原生JS事件绑定方法：

1、通过ＨＴＭＬ属性进行事件处理函数的绑定如：　

＜a href="#" onclick="f()"＞

2、通过JavaScript对象属性进行绑定：

var a=document.getElementById("a");
  a.onclick=function(){alert("你好！")};//这里也可以不用匿名的函数直接赋方法名也是可以的

通过以上这种方式进行事件函数的绑定有个缺点就是只能对一个元素的一个事件绑定一个事件处理程序，如

document.body.onclick=function(){
	alert("first.");
};
document.body.onclick=function(){
	alert("second.");
};

 以上这种方式后面的事件处理程序会将前面的覆盖只会执行alert（"second"）,前面的将不会被执行，如果要注册掉通过元素的属性注册的事件直接个事件属性赋值null即可移除绑定的事件函数，通过元素的属性注册的事件只能发生在事件的冒泡阶段。

3、利用所有文档元素的方法进行事件绑定：

 a、addEventListener(type,handler,boolean),兼容IE以外的所有浏览器（所以IE浏览器是不能触发捕获阶段的事件的）

 b、attachEvent（type,handler）适用于IE浏览器

另种方法可以为JS对象的一个类型事件注册多个事件处理程序，但两者是有区别的：

（1）addEventListener中的type是不带有on的如点击事件直接用"click",而在attachEvent中的type是需要带有前缀on的；（2）前者可以接收三个参数决定事件发生的阶段是在捕获阶段还是冒泡阶段,为true则发生在捕获阶段，如果为false则发生在冒泡阶段；（3）通过addEventListener注册的事件的执行顺序与事件的注册顺序一致，即先注册的先执行，后注册的后执行。而后者执行的顺序与注册的顺序是无关的，因而在写代码时代码的执行不要依赖事件的注册顺序。（4）addEventListener对于相同的事件只会注册一次，即使多次的写了注册函数也只会成功注册一个，而后者可以将将相同的事件处理函数注册多次，并且会多次被执行。

这两种方法通常会被同时应用用于兼容不同版本的浏览器。如：

if(ele.addEventListener())
{
   ele.addEventListener("cilck",function(){alert("你好！")});
}
else  {
    ele.attachEvent("onclick",function(){alert("你好！")；});
}

 注销通过上述方法注册的事件的方法分别为：
removeEventListener(),detach()，在这两个方法中传入和上面一样的参数时就可以注销之前注册的事件，但是需要注意的是如果注册事件时事件处理函数的方法是匿名的则会无法注销即使将原方法传给注销事件函数。

二、jQuery中的注册事件处理函数的方法：（JQ中以下的几种绑定事件的方法咋JQ的源码中都是调用的on）

1、$(ele).bind(type,[data],hadler)

   type：为事件类型，事件名称不需要加on

   data:为可选参数，表示的时传入事件处理程序的参数

   handler:注册的事件处理函数

bind()方法中可以给多个不同类型的事件注册同一事件处理程序：

$("a").bind('mouseenter mouseleave',f)

 用空格将事件名隔开就好。

bind()方法可以给第一个参数参入一个对象这样可以一次为多个事件类型注册不同的事件处理程序：

$("a").bind('mouseleave.my',f)

 bind()方法第一个参数type中可以带有命名空间用于指定给那个命名空间的这个类型事件绑定事件处理程序:

$("a").bind({mouseenter:f1,mouseleave:f2})

当引用多个命名空间时用该方法非常的有用，同时注销事件处理程序时也可以只注销指定命名空间的事件处理程序。

2、$(ele).on(type,selector,[data],handler)

该方法比bind方法多了一个参selector，该参数是用于对选定的元素进行过滤，元素队形中只有符合selector的才绑定该事件处理程序，其他参数同bind方法。该方法是目前应用最为广泛的。

3.$(ele).live(type,handler)

该方法直接将事件的监听器绑定到document对象上了，并没有直接绑定到元素上，元素对象触发事件后事件进行冒泡到docuemnt时才会执行相应的事件处理程序，这样做的好处是新添加的符合条件的元素对象无需在对形同类型的事件处理程序进行绑定，但这样同时会增加根节点的负担，因为所有元素对象的处理程序只有当时间冒泡到根节点时才会被执行，而且当子孙元素过多时，根节点可能将无法判断是哪个元素的请求而导致请求错误。

4、$(ele).delegate(selector,type,[data],handler)

该方法通过代理的方式解决了上面live代理到document的问，selector用于指定触发事件的元素，而调用该方法的元素对象将会成为事件的代理，即事件的监听器将会绑定到该元素对象上，这样就可以指定代理元素对象，不用将所有的事件监听器都绑定到document上。

以上几种注册事件的方法对应的注销事件方法分别为：

1、unbing()

a、带有一个参数时直接指定注销事件的类型名即可，有多个时用空格隔开：

$("a").bind({'click mouseleave'})

 种种方法有个弊端当引用多个命名空间时会导致其他模块中钙元素对象相同事件类型的处理程序被注销掉了，因而可以利用命名空间的方式删除指定模块下的谁极爱你处理程序：

$("a").bind({'mouseenter.my'})

 b、带有两个参数时：

$("a").bind('mouseenter',handler)

 当同一事件类型注册有多个事件处理程序时，该方法可以只注销指定的石晶处理程序。

2、off()

3、die()

4、undelegate()

还有一些事件处理程序的绑定方法，如：one() 用于个元素对象绑定一次性事件处理程序，也就是绑定成功后该事件将只会被触发一次；toogle()该方法用于绑定点击事件处理函数，当传入多个函数时，第一次单击时执行死一个方法，第二次第二个，以此类推并循环；hover（）用于同时给mouseenter、mouseleave事件绑定事件处理函数，当只传入一个方法时两者的处理函数相同，有两个时第一个是mouseenter的，另一个是mouseleave的和bind传对象时的一样功效。

 

$(ele).triggler/$(ele).fire这两个方法是用于触发事件的。