js事件 -- addEventListener事件

最新推荐文章于 2024-07-01 16:22:16 发布
转载 最新推荐文章于 2024-07-01 16:22:16 发布 · 533 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/CCxi/p/10831089.html

本文澄清了关于DOM0级事件绑定的误解，解释了在同一个元素上使用addEventListener添加多个相同事件不会导致覆盖，而是可以同时触发所有绑定的事件处理函数。通过实例展示了如何在一个按钮上添加两个点击事件。

百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖，概念如下：

同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数

其实不然，官网讲解

添加的事件不会覆盖已存在的事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
​
<p>该实例使用 addEventListener() 方法在同一个按钮添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() 
{
    alert ("Hello World!")
}
//如果外部有多个相同的函数名，调用相同的函数名，在外部会直接覆盖，但是addEventListener事件调用同一个函数名，添加的事件不会覆盖已存在的事件，无论后续多次执行也不会被覆盖
function myFunction()  
{
    alert ("Helle World!")
}
 
function someOtherFunction() { alert ("该函数也将被执行!") } 

</script> ​ 

</body> 
</html>

 

转载于:https://www.cnblogs.com/CCxi/p/10831089.html

banni6813
关注
addEventListener(）方法，事件监听
AnitaSun的博客
04-25 433
addEventListener() 方法，事件监听 removeEventListener()，移除事件的监听 语法 addEventListener() element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 将 <p> 元素插入到 <div&gt.
【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-02 1495
TCP的坚固与前端的智慧相遇，让网络的不确定变得可控。你是否经历过更巧妙的重连策略，或是棘手的断连难题？欢迎在评论区分享你的故事，一起加固这座网络的桥，让前端之旅更加稳健。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，
HTML DOM 事件
akuibpt23191的博客
07-13 724
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
js addeventlistener
Charles1938229的博客
02-17 6048
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
好好吃饭，好好睡觉
07-01 6244
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
【JS】自定义JS工具函数库-封装DOM事件监听addEventListener-自定义事件总线eventBus-自定义消息订阅与发布PubSub
YK菌的博客
04-25 789
文章目录1. 封装DOM事件监听addEventListener1.1 复习DOM事件流1.2 事件冒泡1.3 事件委托1.4 自定义DOM事件监听2. 自定义事件总线eventBus定义使用3. 自定义消息订阅与发布PubSub定义使用 1. 封装DOM事件监听addEventListener 1.1 复习DOM事件流 基础知识可以参考这篇博文 【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件 简单复习一下DOM事件流 捕获阶段 当前目标阶段 冒泡阶段
js事件机制----捕获与冒泡机制实例分析
10-15
**addEventListener()** 方法是JavaScript中用于绑定事件处理函数的主要方式，它接受三个参数：事件名称、处理函数和一个布尔值，用于指定事件是在捕获阶段还是冒泡阶段执行。例如： ```javascript element....
window.addEventListener来解决让一个js事件执行多个函数
12-09
可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中，也可以全放到[removed]中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用window....
精选资源
JavaScript使用addEventListener添加事件监听用法实例
01-19
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
addEventListener事件
血色残阳的专栏
03-30 1137
addEventListener(type:String ,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)       useCapture  表示是否打开捕获事件，默认为false       priority    表示监听器的优先级，默认为0，优
addEventListener事件委托
weixin_30240349的博客
05-10 1082
什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处1，提高性能。 好处2，新添加的元素还会有之前的事件。 基本格式：元素.addEventListener（type, fn ...
addeventlistener 事件监听
WebDestiny的博客
08-30 1131
语法 element.addEventListener(event, function, useCapture)； event 为必须参数，类型为字符串，用于指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 function 也为必须参数。指定要事件触发时执行的函数。 事件对象会作为第一个参数传入函数。 事件对象的类型...
addEventListener()事件监听
m0_73493686的博客
10-24 715
您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。方法时，JavaScript与HTML标记分离，以提高可读性，方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。并允许您添加事件侦听器，即使您不控制HTML标记也是如此。方法可以更容易地控制事件对冒泡的反应。方法将事件处理程序附加到指定的元素。方法轻松删除事件侦听器。
addEventListener() 事件监听
热门推荐
boysky0015的博客
06-14 3万+
无意间有人问到了，这个方法，我就学了一下，顺便敲了一个小demo。 addEventListener() 用于向指定元素添加事件。 可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 语法： element.addEventListener(event,fn,useCaption ); 参数说明：tr件，比如 click mouseenter mouseleave
addEventListener( )-事件监听
chengyu12138的博客
10-01 1799
()方法，即为；且同一元素目标可重复添加，不会覆盖之前相同事件；可以使用removeEventListener()方法来移除事件的监听。对象.addEventListener('事件', 函数)例如当我点击按钮时：事件类型：1.鼠标事件：click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开2.焦点事件 focus获得焦点 blur 失去焦点3.键盘触发：keydown 键盘按下触发 keyup键盘松开触发文本事件： input 用户输入事件。
addEventlistener事件对象
qq_67293098的博客
03-09 472
事件对象是我们事件的一系列相关数据的集合，跟事件相关，比如数据点击事件就包含鼠标点击的相关信息，鼠标事件是键盘事件包含的键盘事件的信息比如判断用户按下那个键。事件对象也有兼容性的问题，IE浏览器的6、7、8，我们通过window.event.事件对像只有有了事件之后才会存在。它是系统自创建的不需要参数。这个事件对象我们可以自己命名，比如：event、evt、e.函数里面，event，写在监听函数里面的函数的小括号里面。
JavaScript--addEventListener()方法
m0_74293254的博客
07-14 1248
在上述示例中，我们通过getElementById()方法获取到id为"myButton"的按钮元素，然后使用addEventListener()方法给按钮添加了一个点击事件的监听器。当按钮被点击时，匿名函数将会执行，并在控制台输出"按钮被点击了！对于addEventListener()方法，它用于向指定的元素添加事件监听器，并在该元素上触发指定的事件时执行相应的函数或代码。
JavaScript 的addEventListener() 事件监听详解！
一亩地的专栏
12-19 5972
JavaScript 的addEventListener() 事件监听详解！ addEventListener() 用于向指定元素添加事件。  可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。 语法：  element.addEventListener(event,fn,useCaption );  参数说明：tr件，比如 click mouseenter mouselea...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值