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>
DOM0级事件误区－addEventListener的更多相关文章
- dom0级事件和dom2级事件
dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...
- Dom0级事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 测试DOM0级事件和DOM2级事件的堆叠
1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...
- 【20190226】JavaScript-知识点记录：dom0级事件，dom2级事件
DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- js DOM0级事件和DOM2级事件
注册事件有两种方式,分别是DOM0级和DOM2级 DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数,他的特点是同一个元素绑定相同事件, 后面函数会覆盖前面的 绑定: dom.o ...
- DOM0级事件处理和DOM2级事件处理
转自:http://www.cnblogs.com/holyson/p/3914406.html 0级DOM 分为2个:一是在标签内写onclick事件 二是在JS写onlicke=function ...
- DOM0级事件绑定之js的onclick事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- MySQL 10w+数据 insert 优化
由于业务原因,遇到了如题所述的业务问题,事务执行时间在30s~50s 不等,效果非常不理想 方案1. jdbc批处理 5w+ 数据测试,分别使用了mybatis insert()()(拼接xml) ...
- 【测试基础第六篇】bug定义及生命周期
bug定义 狭义:软件程序的漏洞或缺陷 广义:测试工程师或用户所发现和提出的软件可改进的细节(增强型.建议性)或需求文档存在差异的功能实现 职责:发现bug,提给开发,让其修改 bug类型--了解 代 ...
- python ---倒酒！！
#!/usr/bin/env python3# -*- coding: utf-8 -*-import numbersimport numpyimport math'''三个容器分别为12升.8升.5 ...
- Python-进程-进程池-原理
进程 资源集合,调度和分配资源,说到进程就不得不提到线程,线程和进程是密不可分,进程申请了资源,但真正使用资源的是线程,其实本质上类似面向对象的思想,面向对象把数据和数据的操作封装在一个类中,进程把资 ...
- Python-临时文件文件模块-tempfile
案例: 某项目中,从传感器中获得采集数据,每收集到1G的数据后做是数据分析,最终只保留数据分析的结果,收集到的数据放在内存中,将会消耗大量内存,我们希望把这些数据放到一个临时的文件中 临时文件不能命名 ...
- mysql-6-groupby
#进阶5:分组查询 /* SELECT FROM WHERE GROUP BY ORDER BY 查询列表要求是分组函数和 group by 之后出现的字段 1.筛选条件分为两类: 数据源 位置 关键 ...
- JD-GUI反编译jar包为Java源代码
程序员难免要借鉴其他java工程的代码.可有时只能拿到.calss文件,jar包或者war包,这个时候要求程序员能熟练的将这些类型文件反编译为Java代码并形成可编译运行的项目.本文介绍的反编译工具是 ...
- 实验一 C运行环境与最简单的程序设计
实验一: #include<stdio.h> int main() { int a1,a2; int sum; a1 =123; a2 = 456; sum = a1+ ...
- kalilinux2020.3的安装与一些坑
1.下载镜像文件.iso kali官方下载太慢,用一些魔法也是不行,这里推荐用国内的下载源. 阿里云: https://mirrors.aliyun.com/kali-images/?spm=a2c6 ...
- 主厨(第4部分)- ASP. netNET Core和Angular 2 CRUD SPA
下载source - 79.7 KB 介绍 在Master Chef(第1部分)和Master Chef(第2部分)中,我介绍了如何使用ASP.Net Core和Angular JS.在Master ...