脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js addEventListener()与removeEventListener()

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

 更新时间：2020年03月02日 09:54:40   作者：叶落森  
这篇文章主要介绍了js中addEventListener()与removeEventListener()用法,结合实例形式分析了js中addEventListener()与removeEventListener()基本功能、用法与操作注意事项,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

您可能感兴趣的文章:

相关文章

  • 详解JavaScript中哪一种循环最快呢

    详解JavaScript中哪一种循环最快呢

    这篇文章主要介绍了详解JavaScript中哪一种循环最快呢，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • AJAX XMLHttpRequest对象创建使用详解

    AJAX XMLHttpRequest对象创建使用详解

    这篇文章主要介绍了AJAX XMLHttpRequest对象创建使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 数组Array的排序sort方法

    数组Array的排序sort方法

    下面小编就为大家带来一篇数组Array的排序sort方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • uniapp H5 https跨域请求实现

    uniapp H5 https跨域请求实现

    这篇文章主要介绍了uniapp H5 https跨域请求实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 在html页面上拖放移动标签

    在html页面上拖放移动标签

    在html页面上拖放移动标签，需要的朋友可以参考下。
    2010-01-01
  • 基于JavaScript实现鼠标向下滑动加载div的代码

    基于JavaScript实现鼠标向下滑动加载div的代码

    这篇文章主要介绍了基于JavaScript实现鼠标向下滑动加载div的代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • JS拉起或下载app的实现代码

    JS拉起或下载app的实现代码

    最近做项目遇到这样的需求，通过手机网页判断是否安装了自己公司app，如果安装了则拉起app，没有安装则跳转到下载页。怎么实现呢？下面小编给大家分享js拉起或下载app的实现代码，需要的朋友参考下
    2017-02-02
  • JavaScript将数组转换为链表的方法

    JavaScript将数组转换为链表的方法

    这篇文章主要介绍了JavaScript将数组转换为链表的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • JavaScript正则表达式校验与递归函数实际应用实例解析

    JavaScript正则表达式校验与递归函数实际应用实例解析

    这篇文章主要介绍了JavaScript正则表达式校验与递归函数实际应用,需要的朋友可以参考下
    2017-08-08
  • D3.js实现简洁实用的动态仪表盘的示例

    D3.js实现简洁实用的动态仪表盘的示例

    本篇文章主要介绍了D3.js实现简洁实用的动态仪表盘的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论