百度上很多篇文章讲解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>

DOM0级事件误区－addEventListener的更多相关文章

  1. dom0级事件和dom2级事件

    dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...

  2. Dom0级事件

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  4. 【20190226】JavaScript-知识点记录：dom0级事件，dom2级事件

    DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...

  5. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  6. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  7. js DOM0级事件和DOM2级事件

    注册事件有两种方式,分别是DOM0级和DOM2级 DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数,他的特点是同一个元素绑定相同事件, 后面函数会覆盖前面的 绑定: dom.o ...

  8. DOM0级事件处理和DOM2级事件处理

    转自:http://www.cnblogs.com/holyson/p/3914406.html 0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function ...

  9. DOM0级事件绑定之js的onclick事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 浅谈 ArrayList 及其扩容机制

    浅谈ArrayList ArrayList类又称动态数组,同时实现了Collection和List接口,其内部数据结构由数组实现,因此可对容器内元素实现快速随机访问.但因为ArrayList中插入或删 ...

  2. 常见消息中间件之RocketMQ

    前言 RocketMQ是一款分布式.队列模型的消息中间件,由阿里巴巴自主研发的一款适用于高并发.高可靠性.海量数据场景的消息中间件.早期开源2.X版本名为MetaQ:2015年迭代3.X版本,更名为R ...

  3. kafka学习（三）kafka生产者，消费者详解

    文章更新时间:2020/06/14 一.生产者 当我们发送消息之前,先问几个问题:每条消息都是很关键且不能容忍丢失么?偶尔重复消息可以么?我们关注的是消息延迟还是写入消息的吞吐量? 举个例子,有一个信 ...

  4. 刷题[WUSTCTF2020]CV Maker

    解题思路 好家伙,打开一看像是cms,又看名字CV Maker.我以为直接要搜cve打了.搜了一会发现没什么啊.那先正常做把. 注册 注册成功后这里报错,猜测可能有注入点.先放在这里,继续登陆.发现是 ...

  5. Redis 作者 Antirez 与 Contributor Mattsta 之间关于 CRC 的 Battle

    大家好,我是 yes. 昨天表弟说有个学妹问他 Redis 为什么要用 CRC16(key) mod 16384 来计算 key 所处槽的位置,我想这 CRC 一般都是用来校验的,通过多项式转换成二进 ...

  6. sping ioc 源码分析（一）-- register(componentClasses) 方法

    一.测试环境的搭建: public class Apple { } @Component public class MyComponet { } public class MyCondition im ...

  7. Python-如何拆分含有多种分隔符的字符串?

    案例: 把某个字符串依据分隔符拆分,该字符包含不同的多种分隔符,如下 s = '12;;7.osjd;.jshdjdknx+' 其中 ; . + 是分隔符 有哪些解决方案? 方法1:通过str.spl ...

  8. Leetcode-递归&分治

    50. Pow(x, n) https://leetcode-cn.com/problems/powx-n/ 实现 pow(x, n) ,即计算 x 的 n 次幂函数. 说明: -100.0 < ...

  9. Paxos 协议

    可用性与一致性 为了向用户提供更好的服务体验,现代软件架构越来越注重系统的可用性availability. 正是在这种趋势的驱动下,微服务与容器化技术才能在今天大行其道. 而高可用架构的前提是冗余: ...

  10. 如何用5000行JS撸一个关系型数据库

    首先声明,我不是标题党,我真的是用5000行左右的JS实现了一个轻量级的关系型数据库JSDB,核心是一个SQL编译器,支持增删改查. 源代码放到github上了:https://github.com/ ...