addEventListener()和removeEventListener()追加事件和删除追加事件-6ren

addEventListener()和removeEventListener()追加事件和删除追加事件

转载作者：qq735679552 更新时间：2022-09-27 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章addEventListener()和removeEventListener()追加事件和删除追加事件由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值.

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

要在按钮上为click事件添加事件处理程序，可以使用下列代码:

 
    ? 
   
         1  
         var 
         btn = document.getElementById( 
         "myBtn" 
         ); 
        
         2 btn.addEventListener( 
         "click" 
         ,  
         function 
         () { 
        
         3  alert( 
         this 
         .id); 
        
         4 },  
         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 
         );  
         //有效！

重写后的这个例子没有问题，是因为在addEventListener()和removeEventListener()中用来相同的函数.

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序；。

亲测:

方法的内存地址十分的重要，一定要相同才可以删除；试过遇到的坑

 
    ? 
   
         var 
         clickFun =  
         null 
         ; 
        
         aa =  
         function 
         (){ 
        
         clickFun =  
         function 
         (){ 
        
         alert( 
         "1" 
         ) 
        
         } 
        
         window.removeEventListener( 
         "click" 
         ,clickFun, 
         false 
         ) 
        
         window.addEventListener( 
         "click" 
         ,clickFun, 
         false 
         ) 
        
         } 
        
         setInterval( 
         function 
         (){ 
        
         aa() 
        
         },2000)

需求,需要不断地往一个function里面塞数据，里面会有追加，如果不删除了话，会一直追加上去，不环保并且耗内存，必须要删掉追加；然而像上面这样写的话，由于removeEventListener和addEventListener里面的clickFun内存不相等，导致删除不成功；调整如下:

 
    ? 
   
         var 
         clickFun =  
         null 
         ; 
        
         aa =  
         function 
         (){ 
        
         ！clickFun && （window.removeEventListener( 
         "click" 
         ,clickFun, 
         false 
         )）； 
        
         clickFun =  
         function 
         (){ 
        
         alert( 
         "1" 
         ) 
        
         } 
        
         window.addEventListener( 
         "click" 
         ,clickFun, 
         false 
         ) 
        
         } 
        
         setInterval( 
         function 
         (){ 
        
         aa() 
        
         },2000)

确保删除的是同一个内存的方法。

到此这篇关于addEventListener()和removeEventListener()追加事件和删除追加事件的文章就介绍到这了,更多相关addEventListener()和removeEventListener()追加事件内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！。

原文链接：https://www.cnblogs.com/Sarah119/p/7825265.html 。

最后此篇关于addEventListener()和removeEventListener()追加事件和删除追加事件的文章就讲到这里了,如果你想了解更多关于addEventListener()和removeEventListener()追加事件和删除追加事件的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： SQL 语句中 Where 条件后写上1=1 是什么意思

文章推荐：从操作系统层面分析Java IO演进之路

文章推荐：用 SwiftUI 实现 3D Scroll 效果

文章推荐： CPU 以及内存从哪些方面影响 MySQL 性能？

javascript - 您可以在另一个 .addEventListener 中添加一个 .addEventListener 来完成表单吗？
我想在按下按钮时打开一个表单，然后在完成表单后创建另一个按钮以将数据存储在对象中。我这样做了，但在第二个 addEventListener 中它给了我这个错误: cannot read proper
javascript - 第二次调用 addEventListener 时，如何摆脱 addEventListener 中使用的旧值？
这是我实际代码的简化版本。有三个复选框和按钮(每个编号为 0、1、2)和一个提交按钮。简而言之，如果您选中复选框编号 1 和 2，单击提交，按钮 1 和 2 将被着色。现在您可以单击任何彩色按钮，它
javascript - addEventListener 始终指向所有 addEventListener 元素的最后一个元素或 id 或对象
问题代码 var el = document.getElementById("searchcharm_'"+touch_id+"'"); el.addEventListener('click',
javascript - window.document.addEventListener 与 window.addEventListener
window.document.addEventListener = function(event) {...} window.addEventListener = function(event) {
ajax - XMLHttpRequest.addEventListener 与 XMLHttpRequest.upload.addEventListener
这段代码块有什么区别: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress,
javascript - document.addEventListener 和 window.addEventListener 的区别？
在使用 PhoneGap 时，它有一些使用 document.addEventListener 的默认 JavaScript 代码，但我有自己的代码使用 window.addEventListener
javascript - 为什么 document.body.addEventListener 事件在 document.addEventListener 之前运行？
当我运行这段代码时，为什么 .body 事件先触发？ document.addEventListener('click', function() { console.log('The docume
javascript - 'mousedown' 的 addEventListener 与 'click' 的 addEventListener 不同
我将带有循环的 addEventListener 添加到一些 anchor 元素 products 中，如下所示: for(var j=0;j
javascript - for 循环中的 Addeventlistener 有效，但调试器向我抛出一个未捕获的 TypeError : Cannot read property 'addEventListener' of undefined
所以我的代码可以按我想要的方式工作，但是大多数(IE 除外)调试器都会向我抛出此错误: 未捕获类型错误:无法读取未定义的属性“addEventListener” 这是代码: //Get all ele
javascript - 如果将 addEventListener 放在 head 部分而不是 body 中，则 addEventListener 不起作用
我真的不知道为什么这不起作用。在我的 HTML 中，如果我将脚本放在 head 部分，我会在控制台中收到以下错误: Uncaught TypeError: Cannot read property '
javascript - 在 jest/enzyme 中，如何模拟点击一个元素，其中 eventListener 由 [element].addEventListener(不是 window.addEventListener)绑定(bind)？
在 React 中，当你有一个带有 onClick 属性的元素时，很容易使用 Enzyme 的 .simulate("click") 方法来点击它。然而，在我的代码库中有一个示例，其中一个元素被 Re
Javascript-addEventListener
问候，由于某种原因，当我单击按钮时，我的 -addEventListener 没有执行。任何人都可以帮忙这是我的代码: function elNegro() { alert("Thank Yo
JavaScript .addEventListener
我正在将我的一些代码从 onClick 更改为 addEventListener，因为我已经阅读了各种好处，并且出于关注点分离的目的。然而，我遇到的问题之一是，虽然使用 onClick，我能够调用一个
循环内的Javascript addEventListener
我正在尝试向我在循环中生成的某些元素添加事件监听器。我必须使用 div.lastChild - 虽然在这个例子中它非常愚蠢。但这只是演示: var func = function() {
javascript - addEventListener 无法正常工作
我在将事件监听器添加到 JS 时遇到问题...如果我将按钮与 onclick 属性连接，它会起作用，但如果我在 HTML 中删除它并尝试添加 eventListener('click', myFunc
javascript - addEventListener 模块模式
我不知道为什么，但是当我点击“按钮”时什么也没有发生... 控制台中没有消息，没有错误。如何解决？ JS var bird = (function(){ let button = doc
JavaScript addEventListener() 外部函数在没有事件的情况下触发
我正在绘制一个方框网格，希望能够单击每个方框并使用 SocketIO 将带有其 ID 的通知发送到服务器 let boxes = document.querySelecto
addEventListener mousemove on 文档准备好
我想是新手问题。以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。正在发生的奇怪事情:在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_mo
Flash:addEventListener 未检测到输入文本框中的粘贴事件
我是 Flash 的新手，我似乎无法完成这个简单的操作。 (我正在使用 ActionScript 3.0) 我在我的编辑器中创建了一个输入文本框。实例名称是“测试”。在我的 Action 编辑器中，我
javascript - addEventListener 字节标记
我有一个像那些标签包含一些内容，我想打开/关闭它们，但仅使用纯 javascript。我已经尝试过使用 document.querySelectorAll

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

addEventListener()和removeEventListener()追加事件和删除追加事件