原生 JS 绑定事件 移除事件
监听事件的绑定与移除主要是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 绑定事件 移除事件的更多相关文章
- 原生js绑定和解绑事件,兼容IE,FF,chrome
主要是最近项目中用到了原生的js 解绑和绑定 事件 然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...
- 原生js获得八种方式,事件操作
08.17自我总结 关于js 一.原生js获得八种方式 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTa ...
- 关于原生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 ...
- 通过原生JS实现为元素添加事件
自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...
- js -- 绑定的click addEventListener 事件只触发一次
var btn = document.getElementById('btn'); // 添加事件绑定 btn.addEventListener('click', btnClick, false); ...
- JS绑定带参数的事件总要执行一次方法，如何避免？
类似这样:function aa(vote){alert(vote);}$(".btnn").bind("click",aa(1)});没有点击就开始执行了.怎 ...
- 原生js增加，移除类名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js实现淘宝图片切换
这个淘宝图片切换具体效果就是:鼠标移上底部一行中的小图片,上面大图片区域就会显示对应的图片. gif图片看起来还挺酷的,其实实现很简单,用原生js绑定事件改变大图片区域的src. 上代码,html部分 ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
随机推荐
- 如何用CSS3来实现卡片的翻转特效
CSS3实现翻转(Flip)效果 动画效果 效果分析 当鼠标滑过包含块时,元素整体翻转180度,以实现“正”“反”面的切换. HTML分析 分析:.container,.flip为了实现动画效果做准备 ...
- java.util.concurrent.DelayQueue 源码学习
jdk1.8 DelayQueue,带有延迟元素的线程安全队列,当非阻塞从队列中获取元素时,返回最早达到延迟时间的元素,或空(没有元素达到延迟时间).DelayQueue的泛型参数需要实现Delaye ...
- Flex 弹性盒子布局使用教程
本文转载于<https://blog.csdn.net/lyznice/article/details/53981062>
- Spring Security(2)：过滤器链（filter chain）的介绍
上一节中,主要讲了Spring Security认证和授权的核心组件及核心方法.但是,什么时候调用这些方法呢?答案就是Filter和AOP.Spring Security在我们进行用户认证以及授予权限 ...
- jmeter解决乱码
在jmeter.properties 这个文件里面 找到sampleresult.default.encoding=xx 后面xx改成utf-8,然后取消注释 解决jmeterbody里面中文显示不出 ...
- Map对象，Set对象使用(2)
今天重点见一下Set Set 在我印象里它主要就是去重,Set 是一个值的集合,这个集合中所有的值仅出现一次 Set 属性size:和Map的size一样,返回成员的总数 Set的方法: Set.pr ...
- 【VS开发】winsock 错误多 windows.h和winsock2.h的顺序
Windows平台下用C++做网络开发很多时候都会同时包含这两个头文件,如若顺序不当(windows.h先于winsock2.h)就会出现很多莫名其妙的错误.诸如: c:\program files ...
- [转帖]你不曾见过的国产CPU：可能是最全的龙芯系列芯片家谱（下）
你不曾见过的国产CPU:可能是最全的龙芯系列芯片家谱(下) https://www.ijiwei.com/html/news/newsdetail?source=pc&news_id=7177 ...
- java-监听器(Listener)
监听器:用于监听web应用中某些对象.信息的创建.销毁等动作,服务器会自动调用相应的方法进行处理.常用于统计在线人数,初始化系统参数等. Javaweb监听器主要监听对象有ServletContext ...
- 1.3.4 Fork/Join框架
package com.study.forkjoin; import java.util.ArrayList; import java.util.List; import java.util.conc ...