JavaScript中removeEventListener()使用注意事项
时间:2022-04-22
本文章向大家介绍JavaScript中removeEventListener()使用注意事项,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近复习JavaScript中的基础知识,一方面给新来的实习生介绍一下JavaScript基础知识,一方面也是自己工作一年来自己在JavaScript方面学习的总结。
Javascript在Web开发中地位越来越重要,所以也很多人说,JavaScript在Web开发中地位就像C语言在操作系统上的地位。目前稍微复杂的Web应用或者企业拥有,都会使用到JavaScript。
addEventListener(eventtarget,eventlistener,event caputring)
设计demo的需求是,页面放置一个button。当用户点击button按钮时,对button添加事件,然后在handler处理函数里面,使用removeEventListener()移除刚刚绑定的事件。
<html>
<head>
</head>
<body>
<input id="info" type="button" value="Click Me!" />
<script type="text/javascript">
var target=document.getElementById('info');
target.addEventListener('click',function(){
console.log("I have been clicked!");
target.removeEventListener('click',function(){
console.log("removing the click event!");
},false);
},false);
</script>
</body>
</html>
<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->
实验结果是,用户点击button时,每次都会输出"I have been clicked!",说明removeEventListener()函数没有起到作用。通过查找资料,得出结论。在使用removeEventListener()函数时,handler函数,必须和使用addEventListener()里面的handler函数必须相同。所以上面写的代码是错误的。修正之后的代码应该如下:
<html>
<head>
</head>
<body>
<input id="info" type="button" value="Click Me!" />
<script type="text/javascript">
//addEventListener()和removeEventListener()中handler函数必须相同,移除事件函数才有效。
function myhandler(){
console.log("I have been clicked!");
document.getElementById('info').removeEventListener('click',myhandler,false);
}
var target=document.getElementById('info');
target.addEventListener('click',myhandler,false);
</script>
</body>
</html>
<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->
参考网址:http://www.html5china.com/js/jsbase/20111124_2904.html
目前开发中大多数开发人员会使用常用一种JavaScript类库,比如jQuery,YUI,Prototype等等,所以也不需要考虑IE浏览器和其他支持标准DOM事件浏览器在处理事件不同方法。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 猿实战20——商品发布之sku与笛卡尔乘积的那些事儿
- 浅谈Android单元测试的作用以及简单示例
- linux上传并配置jdk和tomcat的教程详解
- Android SQLite事务处理结合Listview列表显示功能示例
- Android开发之如何自定义数字键盘详解
- 在Android上实现HttpServer的示例代码
- Linux /etc/network/interfaces配置接口方法
- Android中Service和Activity相互通信示例代码
- Android编程实现定时发短信功能示例
- Android实现新浪微博一键分享的实例代码
- Android实现常见的验证码输入框实例代码
- Android实现加载状态视图切换效果
- Retrofit + OkHttp缓存处理的示例代码
- Android图片实现压缩处理的实例代码
- Windows10安装linux子系统的两种方式(图文详解)