百度上很多篇文章讲解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. mysql 事务、隔离级别

    一.事务的四大特性(ACID) 1.原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做,不可能停滞在中间环节.事务执行过程中出错,会回滚到事务开始前的状态,所有的操作就像没有 ...

  2. java 并发线程池的理解和使用

    一.为什么要用线程池 合理利用线程池能够带来三个好处. 第一:降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造成的消耗. 第二:提高响应速度.当任务到达时,任务可以不需要的等到线程创建就能立 ...

  3. C#设置装配加载选项

    NX在打开装配时,需要设置加载方式,如下图所示: 因此,当装配进行了拷贝之后,PART路径变化,再次用NX打开时,会报无法加载的错误.这时需要重新设置从搜索文件夹打开,再次保存之后,之后再按照保存打开 ...

  4. 微服务实战系列（四）-注册中心springcloud alibaba nacos

    1.场景描述 因要用到微服务,关于注册中心这块,与同事在技术原型上做了讨论,初步定的方案是使用:阿里巴巴的nacos+springcloud gateway,下面表格是同事整理的注册中心对比,以前用的 ...

  5. 刷题 [网鼎杯 2018]Fakebook

    解题思路 首先登陆页面发现是这样的: 查看源码 源码很正常,也没有什么特别的 web目录扫描 我用的是dirmap工具扫描,扫描结果保存在一个txt文件中,结果可知没什么后台. robots.txt ...

  6. Vue mustache语法

    mustache语法 Vue中的插值语法mustache本意为胡子,可能是{{}}长得像胡子吧. 下面是对mustache插值语法一个最简单的使用. 被管理元素会通过data属性拿到其中的数据对象. ...

  7. pytest封神之路第零步 快速入门

    背景:本文是在系列第五篇发表后的补充篇章,第一篇介绍了tep,可能对不熟悉pytest的朋友不够友好,特意补充入门篇,帮大家快速了解如何动手写pytest.如果你是从这篇文章第一次阅读,那么请忽略以上 ...

  8. Django在Linux上uwsgi 与nginx的问题与解决

    1.出现只有weclome to nginx 多半是是nginx的配置文件没有修改,把他的路由注释掉. 我是修改错文件夹了,一直在自己下载而非运行的文件夹修改 2.出现502 出现了多次502这里一一 ...

  9. 协同过滤 Collaborative Filtering

    协同过滤 collaborative filtering 人以类聚,物以群分 相似度 1. Jaccard 相似度 定义为两个集合的交并比: Jaccard 距离,定义为 1 - J(A, B),衡量 ...

  10. c++中 预编译头文件PCH

    转载:https://blog.csdn.net/lovemysea/article/details/74858430 一.预编译头文件使用经验: 如果预编译头文件被正确使用时,它确实大大提高我们编程 ...