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

1、通过HTML属性进行事件处理函数的绑定如: 

<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这两个方法是用于触发事件的。

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别的更多相关文章

  1. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  2. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  3. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  4. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  5. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  6. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  7. MVC异步AJAX的三种方法(JQuery的Get方法、JQuery的Post方法和微软自带的异步方法)

    异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...

  8. 原生js中如果有多个onload事件解决方案

    在一个页面中有两个JavaScript 分别都用到了window.onload 一个是:window.onload=func1,另一个是:window.onload=func2 这样就造成了一个Jav ...

  9. 原生JS获取HTML DOM元素的8种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

随机推荐

  1. CSS声明顺序

    CSS对元素样式进行声明,虽然一条规则中的声明可以按照任何顺序写出来,但是还是应该有个优先级的顺序. 如下的声明顺序摘抄自<CSS设计指南>,优先级顺序如下: display及相关声明 p ...

  2. vs2013秘钥

    Ultimate:BWG7X-J98B3-W34RT-33B3R-JVYW9 Premium:FBJVC-3CMTX-D8DVP-RTQCT-92494  YKCW6-BPFPF-BT8C9-7DCT ...

  3. Android 数据库ORM框架GreenDao学习心得及使用总结&lt;二&gt;

    转:http://blog.csdn.net/xushuaic/article/details/24496191 第五篇 查询 查询会返回符合某些特定标准的实体.你可以使用原始的SQL定制查询语句,或 ...

  4. Leetcode_252_Implement Stack using Queues

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/48598773 Implement the followin ...

  5. 20175305张天钰《java程序设计》第九周学习总结

    <java程序设计>第九周学习总结

  6. 搭建Sonar代码走查环境

    1.下载SonarQube并解压(查看检测结果用) 2.根据自己系统下载SonarQube Runner(检测代码用,旧版名叫Sonar Scanner) 3.在自己要检测的工程目录下建立sonar- ...

  7. webpack-dev-server的执行逻辑

    1.运行npm i webpack-dev-server -D 把工具安装到项目的本地开发依赖 2.改工具用法跟webpack的用法完全一样:package.json中增加配置,直接用npm run ...

  8. SpringBoot启动和停止脚步

    1.start.sh # start.sh 启动项目 #!/bin/sh file="/123/springcloud/admin.jar" if [ -f "$file ...

  9. 关于事件委托的整理 ,另附bind,live,delegate,on区别

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...

  10. UNIX 系统调用:dup,dup2实现重定向

    重定向一般在命令行里就是把原本输出到屏幕的数据转而输出到一个指定的文件当中.如 $ pwd > workdir.txt 此时workdir.txt内就存储了pwd命令的输出,当前所在的工作目录 ...