监听事件的绑定与移除主要是addEventListener和removeEventListener的运用。

addEventListener语法

element.addEventListener(type，handler，false/true)

type:事件类型

handler:事件执行触发的函数

false/true:false为冒泡/ture为捕获，参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

事件捕获：父级元素先触发，子集元素后触发；

事件冒泡：子集元素先触发，父级元素后触发；

一般的绑定事件，都是采用冒泡方式，也就是使用false

removeEventListener语法

element.removeEventListener(type，handler，false/true)

参数值含义和上述一样。

1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4     <meta charset="UTF-8">

 5     <title></title>

 6 </head>

 7 <body>

 8 <input type="button" value="test1" id="btn1">

 9 <input type="button" value="test2" id="btn2">

10 <script>

11     var btn1=document.getElementById("btn1");/*实名函数*/

12     var count=0;

13     var handle1=function() {

14         alert(count++);

15         if (count == 3) {

16             alert("事件结束")

17             btn1.removeEventListener("click",handle1,false);

18         }

19     }

20     btn1.addEventListener('click',handle1,false);

21

22

23     var btn2=document.getElementById("btn2");/*匿名函数*/

24     btn2.addEventListener("click",function(){

25         alert(123);

26         removeEventListener("click",function(){

27             alert(123)

28         },false)

29     },false)

30 </script>

31 </body>

32 </html>

原生 JS 绑定事件 移除事件的更多相关文章

  1. 原生js绑定和解绑事件,兼容IE,FF,chrome

    主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...

  2. 原生js获得八种方式,事件操作

    08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...

  3. 关于原生js中ie的attacheEvent事件用匿名函数改变this指向后,不能用detachEvent删除绑定事件的解决办法？

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/28/%e5%85%b3%e4%ba%8e%e5%8e%9f%e7%94%9fjs%e ...

  4. 通过原生JS实现为元素添加事件

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...

  5. js -- 绑定的click addEventListener 事件只触发一次

    var btn = document.getElementById('btn'); // 添加事件绑定 btn.addEventListener('click', btnClick, false); ...

  6. JS绑定带参数的事件总要执行一次方法，如何避免？

    类似这样:function aa(vote){alert(vote);}$(".btnn").bind("click",aa(1)});没有点击就开始执行了.怎 ...

  7. 原生js增加，移除类名

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生js实现淘宝图片切换

    这个淘宝图片切换具体效果就是:鼠标移上底部一行中的小图片,上面大图片区域就会显示对应的图片. gif图片看起来还挺酷的,其实实现很简单,用原生js绑定事件改变大图片区域的src. 上代码,html部分 ...

  9. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

随机推荐

  1. 一、Linux的基础使用--登录、开关机与在线、命令的查询帮助

    目录 一.Linux的基础使用 1.1 X Window 与命令行模式的切换 1.2 命令行模式下命令的执行 1.3 修改支持语系 1.4 基础命令的操作 1.5 几个重要的热键[Tab].[Ctrl ...

  2. java Date 转mysql timestamp 秒数不一致

    mysql的字段类型是timestamp(0), java的类型的是util.Date, 在插入数据的时候发现, 数据库的实际数据秒数比预想的数据偶尔会大1秒. 问题的原因: mysql的timest ...

  3. 【English】What is a Java StringWriter, and when should I use it?（转帖）

    转帖地址:http://www.it1352.com/989366.html Question: What is a Java StringWriter, and when should I use ...

  4. 转贴：PLSQL中 commit 和 rollback 的区别

    PLSQL中 commit 和 rollback 的区别 原文链接:https://blog.csdn.net/jerrytomcat/article/details/82250915 一. comm ...

  5. python之Anaconda python3.7安装

    1.下载 https://www.anaconda.com/distribution/ #你会发现,使用windows下载十分慢,既然这样,为何不尝试centos(linux)安装呢?本人使用cent ...

  6. PHP判断访问者是PC端还是移动端

    function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { ...

  7. labelme

    项目:https://github.com/wkentaro/labelme?tdsourcetag=s_pcqq_aiomsg 说明:https://www.bilibili.com/video/a ...

  8. 用SSMS连接Azure Sql Database 与连接本地库的一些操作区别

    背景 我们知道Azure Sql Database 可以降低运维成本.是一种Pass模式,有资源弹性设置,可以自由调整资源自动对应不同业务高峰(当然也可以降低费用成本),也方便项目后期的资源扩展,以及 ...

  9. android studio 低版本升级高版本的问题

    配置 适用场景 2.0 升级3.0  / 3.0升级3.1 gradle的问题注意每个AS版本的gradle插件都对应了gradle的版本 传送门 https://developer.android. ...

  10. 安装php扩展sphinx-1.2.0.tgz和libsphinxclient0.9.9

    一.首先安装libsphinxclient(php模块需要) cd /usr/local/src/tar zxvf sphinx-0.9.9.tar.gzcd sphinx-0.9.9/api/lib ...