JS用addEventListener添加事件监听方法后,可以用removeEventListener来解除监听:

element.removeEventListener(event, myFunction)

注意:兼容: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);

element.detachEvent(event, function);

var x = document.getElementById("myBtn");

if (x.addEventListener) { // 所有主流浏览器,除了 IE 8 及更早版本

x.addEventListener("click", myFunction);

} else if (x.attachEvent) { // IE 8 及更早版本

x.attachEvent("onclick", myFunction);

}

注意:解除绑定事件的时候一定要用函数的句柄,把整个函数写上是无法解除绑定的。

错误写法:

btn.addEventListener("click",function(){

alert(11);

});

btn.removeEventListener("click",function(){

alert(11);

});

正确写法:

btn.addEventListener("click",eventTwo);

btn.removeEventListener("click",eventOne);

总结:对函数进行封装后的监听事件如下,兼容各大主流浏览器。

/*

* addEventListener:监听Dom元素的事件

*

* target:监听对象

* type:监听函数类型,如click,mouseover

* func:监听函数

*/

function addEventHandler(target,type,func){

if(target.addEventListener){

//监听IE9,谷歌和火狐

target.addEventListener(type, func, false);

}else if(target.attachEvent){

target.attachEvent("on" + type, func);

}else{

target["on" + type] = func;

}

}

/*

* removeEventHandler:移除Dom元素的事件

*

* target:监听对象

* type:监听函数类型,如click,mouseover

* func:监听函数

*/

function removeEventHandler(target, type, func) {

if (target.removeEventListener){

//监听IE9,谷歌和火狐

target.removeEventListener(type, func, false);

} else if (target.detachEvent){

target.detachEvent("on" + type, func);

}else {

delete target["on" + type];

}

}

var eventOne = function(){

alert("第一个监听事件");

}

function eventTwo(){

alert("第二个监听事件");

}

window.onload = function(){

var bindEventBtn = document.getElementById("bindEvent");

//监听eventOne事件

addEventHandler(bindEventBtn,"click",eventOne);

//监听eventTwo事件

addEventHandler(bindEventBtn,"click",eventTwo );

//监听本身的事件

addEventHandler(bindEventBtn,"click",function(){

alert("第三个监听事件");

});

//取消第一个监听事件

removeEventHandler(bindEventBtn,"click",eventOne);

//取消第二个监听事件

removeEventHandler(bindEventBtn,"click",eventTwo);

}

更多前端知识请浏览前端园地其它文章^_^!

js如何监听元素事件是否被移除_JS移除事件监听的方法 .removeEventListener( )相关推荐

  1. js怎么获取一个元素与屏幕右边的距离_js中如何获取某个元素到浏览器最左和最右的距离...

    js中如何获取某个元素到浏览器最左和最右的距离以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! js中获取某个元素到浏览器 ...

  2. js怎么获取一个元素与屏幕右边的距离_js获取元素到屏幕左上角的距离

    开发过程中经常会遇到 获取元素到屏幕左上角的距离, 当我们使用jQuery开发时,我们可以使用 $.offset()来获取准确的距离. 如果我们的项目中并没有引入jQuer的话,跟希望通过原生方法实现 ...

  3. js如何监听元素事件是否被移除_JavaScript 监听元素是否进入/移出可视区域

    JavaScript 监听元素是否进入/移出可视区域 常规操作 防抖节流 IntersectionObserver 兼容的代码 常规操作 通常的做法是,监听srcoll事件,根据元素的offset来判 ...

  4. js监听元素尺寸变化

    上代码: /*** @description 监听元素尺寸变化* @author: hruomei* @update* @date: 2021-07-22 11:29:40*/export defau ...

  5. js监听浏览器返回、后退、上一页按钮事件方法

    一.监听浏览器事件 ⼤家知道在页⾯中我们可以使⽤javascript window history,后退到前⾯页⾯,但是由于安全原因javascript不允许修改history ⾥已有的url链接,但 ...

  6. js IntersectionObserver监听元素的显示与隐藏,图片懒加载

    IntersectionObserver监听显隐,监听元素在可视窗口中展示的比例,1:完全展示出来了,0:完全遮挡了,opacity和visibility控制的显隐是不会触发的.该api常用于图片懒加 ...

  7. vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作

    效果图如下所示 .html 今日热门 今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...

  8. vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度

    VUE如何实时监听元素距离顶部高度 发布时间:2020-07-30 09:09:43 来源:亿速云 阅读:150 作者:小猪 这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...

  9. JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)...

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

最新文章

  1. 【西交ACM】100 A+B problem
  2. 直播预告 | AAAI 2022论文解读:基于能量的主动域自适应学习方法
  3. Elasticsearch filter和query的不同
  4. hdu 1800 (map)
  5. swift怎么调用Java,Swift完成UIAlertController的调用
  6. 修改这个新的伪原创工具列表
  7. FastCGI - Writing Hello World in FCGI with C++
  8. html5 打包ios.上架,iOS帮客户打包App上架的正确姿势
  9. 5g网络架构_【5G网络架构】系列之五:5G核心网向to B演进
  10. 在Android关机中插入脚本
  11. [原]Linux 命令行浏览器
  12. select2根据传入的url参数动态添加option
  13. 软件工程实践总结--个人作业
  14. 微信公众号 关注推送消息报错 45047
  15. 抖音无水印解析API
  16. 放大电路、单管共发射极放大电路结构、工作原理、lceda仿真
  17. armv7l安卓刷linux,技术讲解-安卓APK快速生成后门(实现手机入侵)
  18. 图文模态交互 | CLIP + GAN = ?
  19. js实现审批流_顺序审批流的简单代码实现
  20. 能量原理与变分法笔记06:高阶导数的变分问题(包含函数的高阶导数)

热门文章

  1. 如何在 Flink 中规划 RocksDB 内存容量?
  2. 日均万亿条数据如何处理?爱奇艺实时计算平台这样做
  3. 达摩院最新AI技术助力天猫双11,提供接近真人的语音交互体验
  4. “做好大数据测试,我是认真的!”
  5. 服务实体经济、战略级行业再下一城,钉钉发布制造行业解决方案2.0
  6. TailwindCSS v3.0 正式发布!一大波新特性来袭!
  7. 华为云专属月·行业深耕专项行动正式开启
  8. 聊聊缓存机制:双写兜兜转转,又回到了串行化
  9. 今天下午三点,2020深圳开放数据应用创新大赛将举行第二场线上推介会
  10. 腾讯会议扩容背后:100万核计算资源全由自研服务器星星海支撑