原生 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,那 ...
随机推荐
- xpath 轴定位表达方式
xpath的使用基本语法: 1.// 从根节点开始,查找对象是全文. 2./ 从当前标签的路径开始查找 3.text()获取当前路径下的文本 4.@+类名或者id名 查找类名或者id的名字 5. .一 ...
- I am a legend: Hacking Hearthstone with machine-learning Defcon talk wrap-up
I am a legend: Hacking Hearthstone with machine-learning Defcon talk wrap-up: video and slides avail ...
- js获取本地ip
function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs //compatibility for fi ...
- About Xi’an
Introduction Ancient Capital It is the birthplace of the Chinese Nation, is one of the four ancient ...
- [Bayes] *Bayesian Classifier for Face Recognition
Bayesian在识别领域的贡献,着实吸引人 阅读笔记 Gabor特征 (简介,另单独详述) 通过上面的分析,我们知道了,一个Gabor核能获取到图像某个频率邻域的响应情况,这个响应结果可以看做是图像 ...
- 解决Python-OpenCV中cv2.rectangle报错
在PyTorch中测试DataLoader读取后的图像,对图像画框cv2.rectangle时报错: TypeError: Layout of the output array img is inco ...
- 安装“Microsoft SQL Server 2014 Management Objects”时报错"Error Writing to file: Microsoft.SqlServer.XEvent.Linq.dll."
问题: 当安装的软件依赖Microsoft SQL Server 2014 Management Objects时,会把这个组件打进安装包里,但是在服务器上安装时却报如下错误: “Error Writ ...
- Matlab求微分方程的符号解1
一.常微分方程的求解 例1. 例2. 例3. 通常我们使用syms 和dsolve来求解: first: second:表示 third:如果有必要 功能函数diff可以完成一元或多元函数任意阶数的微 ...
- Elasticsearch 追加更新
追加更新,学名不知道叫啥,我这里指在历史数据的基础上,追加数据更新.比如 价格数据,我在价格字段里面保存了一个每天价格的数组,追加更新的时候在数组的后面直接add,而不是像一般情况那样覆盖. ES追加 ...
- eNSP——利用单臂路由实现VLAN间路由
原理: 以太网中,通常会使用VLAN技术隔离二层广播域来减少广播的影响,并增强网络的安全性和可管理性.其缺点是同时也严格地隔离了不同VLAN之间的任何二层流量,使分属于不同VLAN的用户不能直接互相通 ...