百度上很多篇文章讲解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. 从基础到实践，一文带你看懂HashMap

    摘要:HashMap是一个用于存储Key-Value键值对的集合,它是面试中经常问到的一个知识点. HashMap是面试中经常问到的一个知识点,也是判断一个候选人基础是否扎实的标准之一,因为通过Has ...

  2. bellman-ford算法求K短路O(n*m)，以及判负环O(n*m)

    #include<iostream> #include<algorithm> #include<cstring> using namespace std; cons ...

  3. 关于JAVA的垃圾回收机制

    使用JAVA编程时,几乎不需要考虑"内存泄漏"的问题,这也是JAVA相较于C++的一个优点. 最近在看<Java编程思想>(第四版,听说第五版有点牛逼....),里面讲 ...

  4. Java中synchronized关键字理解

    好记性不如烂笔头~~ 并发编程中synchronized关键字的地位很重要,很多人都称它为重量级锁.利用synchronized实现同步的基础:Java中每一个对象都可以作为锁.具体表现为以下三种形式 ...

  5. myisamchk是用来做什么的？MyISAM Static和MyISAM Dynamic有什么区别？

    myisamchk是用来做什么的? 它用来压缩MyISAM[歌1] 表,这减少了磁盘或内存使用. MyISAM Static和MyISAM Dynamic有什么区别? 在MyISAM Static上的 ...

  6. 国际化的实现i18n--错误码国际化以及在springboot项目中使用

    国际化 ,英文叫 internationalization 单词太长 ,又被简称为 i18n(取头取尾中间有18个字母); 主要涉及3个类: Locale用来设置定制的语言和国家代码 Resource ...

  7. Lesktop开源IM移动端：接入LayIM移动端UI

    在<开源企业即时通讯和在线客服>中已介绍了Lesktop的桌面模式和Web模式,但是没有移动端.评论中 dotnetcms.org工作室 提到了LayIM,看了一下官网的演示和文档,如果用 ...

  8. vue+elmentUI项目的正则判断

    一.为了方便重复利用管理,我创建一个regExp.ts文件来管理正则的表达式,内容如下: 1 /* eslint-disable */ 2 const phoneNumberRegExp = /^[1 ...

  9. MYSQL 50 基础题　（转载）

    MYSQL 50 基础题 (转载) 前言:最近在强化MYSQL 能力 答案在(也是转载处) https://www.cnblogs.com/kangxinxin/p/11585935.html 下面是 ...

  10. STM32之旅5——IWDG

    STM32之旅5--IWDG stm32有两个看门狗,一个独立看门狗(IWDG).一个窗口看门狗(WWDG):独立看门狗是时钟源是内部的40kHz的低速时钟,即使主频出问题了,独立看门狗也不会受到影响 ...