js中addEventListener()与removeEventListener()用法案例分析


Posted in Javascript onMarch 02, 2020

本文实例讲述了js中addEventListener()与removeEventListener()用法。分享给大家供大家参考,具体如下:

所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法,用于追加事件和删除追加。

接受参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。 (3个)

最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。默认为false;

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

假如在一个按钮上添加一个点击事件,代码如下:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert(this.id);
}, false);

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert(this.id);
}, false);
btn.addEventListener("click", function () {
  alert("Hello World");
}, false);

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。通过addEventListener()添加的匿名函数无法移除,如下面的例子所示:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效!
  alert(this.id);
}, false);

在这个例子中,removeEventListener无法删除addEventListener所追加的事件,因为两个方法并不相等,内存地址已经是不同的,如下面的例子所示:

var btn = document.getElementById("myBtn");
var handler = function () {
     alert(this.id);
   };
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效!

案例:

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄,鼠标在桔红色的框内移动时会显示随机数。
 <p>点击按钮移除 DIV 的事件句柄。</p>
 <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js opener的使用详解
Jan 11 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 #Javascript
原生js实现日历效果
Mar 02 #Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 #Javascript
详解Vue中的Props与Data细微差别
Mar 02 #Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 #Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 #Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 #Javascript
You might like
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
用javascript实现自定义标签
2007/05/08 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
积极向上的团队口号
2014/06/06 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers