dtcms 源码 以太坊 qt vuejs视频教程 河南省普通话考试官网 android项目实例 office2016修复 oracle删除表字段 js对象添加元素 javaweb是前端还是后端 pythonassert函数 python操作文件 python读取字典 java在线教程 java集成 java配置 java查看数据类型 java如何配置环境变量 javaenum 幽城幻剑录五内 c语言表白代码 3389扫描器 自动答题软件 键盘打字手指口诀 spring拦截器 小程序图片上传 devenv gmail邮箱打不开 imm32 电脑防护软件 迅雷被封 迅雷去广告 qq三国辅助 qq提取安装文件失败 武林外传天师加点 SQL基础教程 ps怎么把字体加粗 cdr透明度 小米手机怎么长截屏 办公软件软件
当前位置: 首页 > 学习教程  > 

原生js绑定事件 解绑

2020/10/16 18:03:51 文章标签: js原生点击事件

1 所以,想解除事件就相当简单了,只需要再注册一次事件,把值设成null,例如: var btn document.getElementById("test"); 2 3 btn.onclick function(e){ 4 alert("ok"); 5 }; 6 7 btn.oncli…

 
1 大笑大笑大笑 所以,想解除事件就相当简单了,只需要再注册一次事件,把值设成null,例如:
var btn = document.getElementById("test");
2 
3 btn.onclick = function(e){
4   alert("ok");
5 };
6 
7 btn.onclick = null;原理就是最后注册的事件要覆盖之前的,最后一次注册事件设置成null,也就解除了事件绑定。


 

假设有这样的html结构:

1 <div id="test" class="test">
2   <div id="testInner" class="test-inner"></div>
3 </div>
1 var btn = document.getElementById("test");
 2 
 3 //捕获事件
 4 btn.addEventListener("click", function(e){
 5   alert("ok1");
 6 }, true);
 7 
 8 //冒泡事件
 9 btn.addEventListener("click", function(e){
10   alert("ok");
11 }, false);
点击内层的div,先弹出ok1,后弹出ok。结合上边的原理图,外层div相当于图中的body,内层div相当于图中最下边的div,证明了捕获事件先执行,然后执行冒泡事件。
 1 var btn = document.getElementById("test");
 2 var btnInner = document.getElementById("testInner");
 3 
 4 btn.addEventListener("click", function(e){
 5   alert("ok1");
 6 }, false);
 7 
 8 btnInner.addEventListener("click", function(e){
 9   //阻止冒泡
10 e.stopPropagation();
11   alert("ok");
12 }, false);

 1 var btn = document.getElementById("test");
 2 //将回调存储在变量中
 3 var fn = function(e){
 4   alert("ok");
 5 };
 6 //绑定
 7 btn.addEventListener("click", fn, false);
 8 
 9 //解除
10 btn.removeEventListener("click", fn, false);



本文链接: http://www.dtmao.cc/news_show_300359.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?