监听事件的绑定与移除主要是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. (八）爬虫之js调试（登陆知乎）

    上次爬取网易云音乐,折腾js调试了好久,难受....今天继续练练手,研究下知乎登陆,让痛苦更猛烈些. 1.简单分析 很容易就发现登陆的url=“https://www.zhihu.com/api/v3 ...

  2. CSS — 隐藏滚动条，依旧可以滚动

    公司的系统,在PC端可以管理我们的公众号,在发布模块页面时有一个预览功能,呈现页面在手机端的样式. 做法很简单,一会就完成了,但是在预览内容过长时手机外框会有一个滚动条,影响美观,于是就想把它去掉,有 ...

  3. SQL-W3School-高级：SQL UNIQUE 约束

    ylbtech-SQL-W3School-高级:SQL UNIQUE 约束 1.返回顶部 1. SQL UNIQUE 约束 UNIQUE 约束唯一标识数据库表中的每条记录. UNIQUE 和 PRIM ...

  4. 使用XCode7打包动态库(Framework)

    iOS中的静态库和动态库 概念 静态库(Static Library)以 .a 为后缀,它是你的源码的实现.m文件编译而成的二进制文件集合,需要配合上暴漏的.h文件使用,它在引用链接时拷贝至可执行文件 ...

  5. Spring Aop（十二）——编程式的创建Aop代理之AspectjProxyFactory

    转发地址:https://www.iteye.com/blog/elim-2397922 编程式的创建Aop代理之AspectjProxyFactory 之前已经介绍了一款编程式的创建Aop代理的工厂 ...

  6. iOS-意见反馈UITextView的使用+不能输入字符输入

    @interface DMFeedbackViewController ()<UITextViewDelegate,UIAlertViewDelegate>@property (nonat ...

  7. FFMPEG 常用命令行

    目录 1. 分离音视频 2. 解复用 3. 视频转码 4. 视频封装 5. 视频剪切 6. 视频录制 7.叠加水印 8.将MP3转换为PCM数据 9. 推送RTP流.接收RTP流并存为ts文件 10. ...

  8. 外带IP 防火墙限制导致 IP不通

    案例: 业务报障,一台设备配了20个IP,跳板机测试都通,但从外边访问,发现部分IP通,部分不通. 排雷: 1. 从跳板机测试都通,说明所有IP 本身应该都没问题的,都可以用,2. 从其他设备测试,部 ...

  9. 【VS开发】千兆以太网的传输速度

    千兆以太网主流标准 千兆以太网络技术早在上世纪90年代末就已成熟,其中,1995年国际标准化组织TIA/EIA颁布了1000Base-TX标准,该标准的目的是把双绞线用于千兆以太网中,其目的是在6类非 ...

  10. ffmpeg学习笔记-多线程音视频解码

    之前的视频解码仍然存在问题,那就是是在主线程中去完成解码的,会造成线程阻塞,这里将其改为多线程解码,使其主线程不被阻塞 前面介绍了音视频的主线程解码,那样会阻塞主线程,在前面学习了多线程以后,就可以对 ...