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

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

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

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

二、经过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便可移除绑定的事件函数，经过元素的属性注册的事件只能发生在事件的冒泡阶段。

三、利用全部文档元素的方法进行事件绑定：

 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()，在这两个方法中传入和上面同样的参数时就能够注销以前注册的事件，可是须要注意的是若是注册事件时事件处理函数的方法是匿名的则会没法注销即便将原方法传给注销事件函数。

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

一、$(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})

当引用多个命名空间时用该方法很是的有用，同时注销事件处理程序时也能够只注销指定命名空间的事件处理程序。

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

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

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

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

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

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

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

一、unbing()

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

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

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

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

 b、带有两个参数时：

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

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

二、off()

三、die()

四、undelegate()

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

 

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