原生 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,那 ...
随机推荐
- Maven 3.6.1 下载及安装配置
Step1:Download You can download Maven3.6.1 from maven.apche.org , or from here. Step2:Unzip and add ...
- [go]json序列化
// json字段别名 type User struct { Id int `json:"id,string"` Name string `json:"username& ...
- shell生成指定范围随即整数
#!/bin/bash function rand(){ min=$ max=$(($-$min+)) num=$( | cksum | awk -F ' ' '{print $1}') echo $ ...
- mongodb查询修改
//查 public StatisticsSchoolPracticeView findByUser(String userId,int statOrgType,int inDateType){ Qu ...
- Apache设置静态文件的失效时间
步骤1:启用expires模块 [root@zlinux logs]# vim httpd.conf LoadModule expires_module modules/mod_expires.so ...
- npm install --save react-native-device-info报错
报错截图如下: 把react-native-device-info删了再添加还是这样,后面使用yarn就成功了. 然后发现会报错,这里估计是Xcode 9的bug,你只要确保以下显示就可以了.没有自己 ...
- iframe高度自适应方法
<iframe width="100%" id="tbbrecommend" name="tbbrecommend" src=&quo ...
- vim复制粘贴导致多行出现#号解决办法
在vim内复制多行假如复制的行带有#号会导致其他不带#号的行自动加# 解决办法,输入一下命令再粘贴即可 :set paste
- HashMap和ConcurrentHashMap 源码关键点解析
第一部分:关键源码讲解 1.HashMap 是如何存储的? a.底层是一个数组 tab b. hash=hash(key) ,然后根据数组长度n和hash值,决定当前需要put的元素对应的数组下标, ...
- 78 leetCode 位运算解法
按照自己的理解题目,数组内所有的组合:假如[1,2,3,4]看成1111到0000里面的排列组合,取位运算. vector<vector > subsets(vector&nums ...