百度上很多篇文章讲解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. spring aop原理和实现

    一.aop是什么 1.AOP面向方面编程基于IoC,是对OOP的有益补充: 2.AOP利用一种称为"横切"的技术,剖解开封装的对象内部,并将那些影响了 多个类的公共行为封装到一个可 ...

  2. Oracle学习（十一）聚合函数

    AVG() 求平均数 --查询某列的平均值 SELECT AVG(列) FROM 表 COUNT()查询条数 -- 查询所有记录的条数 select count(*) from 表; -- 查询对应列 ...

  3. 一篇文章搞定 Nginx 反向代理与负载均衡

    代理 要想弄明白反向代理,首先要知道啥是正向代理,要搞懂正向代理只需要知道啥是代理即可.代理其实就是一个中介,在不同事物或同一事物内部起到居间联系作用的环节.比如买票黄牛,房屋中介等等. 在互联网中代 ...

  4. Neo4j---性能优化

    不会项目管理的研发不是好loder(^_^ ^_^),开个玩笑,目的是想说项目管理很重要,研发同胞们需要重视.重视.重视(重要的事情说三遍).随着项目业务扩展,不再是停留在基本某一业务范围,海量数据接 ...

  5. CentOS7设置内网时间同步

    1.yum 安装 NTP服务器 [root@master ~]# yum -y install ntp 2.启动ntpd服务 [root@master ~]# systemctl start ntpd ...

  6. 实验一 C运行环境与最简单的程序设计

    实验一: #include<stdio.h> int main() {   int a1,a2;   int sum;   a1 =123;   a2 = 456;   sum = a1+ ...

  7. 066 01 Android 零基础入门 01 Java基础语法 08 Java方法 02 带参有返回值方法

    066 01 Android 零基础入门 01 Java基础语法 08 Java方法 04 带参有返回值方法 本文知识点:带参有返回值方法 说明:因为时间紧张,本人写博客过程中只是对知识点的关键步骤进 ...

  8. MySQL 向表中插入、删除数据

    一.向表中插入一条信息 1.查看表中的数据 mysql> SELECT * FROM user; +----+---------+----------+ | id | account | pas ...

  9. 1个LED灯闪烁的Arduino控制

    控制任务和要求 让一个LED灯闪烁 接线 程序设计 1 int half_cycle=1000; // define the cycle time of LED blink 2 int LED_pin ...

  10. MySQL数据库之索引、事务、存储引擎详细讲解

    一.索引 1.1 索引的概念 索引是一个排序的列表,存储着索引值和这个值所对应的物理地址 无须对整个表进行扫描,通过物理地址就可以找到所需数据 (数据库索引类似书中的目录,通过目录就可以快速査找所需信 ...