监听事件的绑定与移除主要是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. mysql端口3306无法访问

    mysql主备复制,show slave status显示IO一直connecting 一.查看了防火墙,已经处于关闭状态 二.查看使用的复制用户的权限,也已经开放 三.telnet访问另外一台机器端 ...

  2. 背包DP 方案数

    题目 1 P1832 A+B Problem(再升级) 题面描述 给定一个正整数n,求将其分解成若干个素数之和的方案总数. 题解 我们可以考虑背包DP实现 背包DP方案数板子题 f[ i ] = f[ ...

  3. Python Docstring 风格和写法学习

    什么是Python Docstring 和Java类似,Python也通过注释形式的Docstring给程序.类.函数等建立文档.通过Docstring建立的文档不仅对人来说有更好的可读性,也能够让I ...

  4. C之堆栈

    栈* 自动申请,自动释放* 大小固定,内存空间连续* 从栈上分配的内存叫静态内存 堆* 程序员自己申请* new/malloc* 大小取决于虚拟内存的大小,内存空间不连续* java中自动回收,C中需 ...

  5. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_7.RabbitMQ研究-工作模式-工作队列模式

    RabbitMQ有以下几种工作模式 : 1.Work queues 2.Publish/Subscribe 3.Routing 4.Topics 5.Header 6.RPC 1.Work queue ...

  6. mysql left join对于索引不生效的问题

    SELECT t.val, m.username FROM  test.tmp_table AS t LEFT JOIN cehome.uc_members AS m USE INDEX(`mobil ...

  7. linux 清除/var/spool/mail/root日志存储

    检查出是/var/spool/mail下的root文件过大,然后进到服务器里面一查看,确实是这个问题,就是用cat /dev/null > /var/spool/mail/root,把这个文件清 ...

  8. 剑指offer 66. 构建乘积数组（Leetcode 238. Product of Array Except Self）

    剑指offer 66. 构建乘积数组 题目: 给定一个数组A[0, 1, ..., n-1],请构建一个数组B[0, 1, ..., n-1],其中B中的元素B[i] = A[0] * A[1] * ...

  9. 最新 东软java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.东软等10家互联网公司的校招Offer,因为某些自身原因最终选择了东软.6.7月主要是做系统复习.项目复盘.LeetCode ...

  10. HTML5 & CSS初学者教程（详细、通俗易懂）

    前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现 ...