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 ...
随机推荐
- nginx特性
nginx特点: 更快,高扩展性,高可靠性,低能耗性,单机支持10w以上的并发连接,热部署,自由的BSD, Apache.Lighttpd.Tomcat.Jetty.IIS,它们都是Web服务器 SN ...
- jquery全选，全不选，反选
前台 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.o ...
- 主键生成器效率提升方案|基于雪花算法和Redis控制进程隔离
背景 主键生成效率用数据库自增效率也是比较高的,为什么要用主键生成器呢?是因为需要insert主表和明细表时,明细表有个字段是主表的主键作为关联.所以就需要先生成主键填好主表明细表的信息后再一次过在一 ...
- mysql-15-view
#视图 /* 含义:虚拟表,和普通表一样使用.通过表动态生成的数据 只保存了sql逻辑,不保存查询结果 应用场景: 1.多个地方用到同样的查询结果 2.该查询结果使用的sql语句较为复杂 */ USE ...
- P1879 [USACO06NOV] Corn Fields G
题目描述 农场主John新买了一块长方形的新牧场,这块牧场被划分成M行N列(1 ≤ M ≤ 12; 1 ≤ N ≤ 12),每一格都是一块正方形的土地.John打算在牧场上的某几格里种上美味的草,供他 ...
- ansible-playbook-jinja2管理nginx配置文件
1. 案例1:创建jinja2的nginx的主配置文件 1) 编写jinja2的nginx的主配置文件 1 [root@test-1 jinja2]# vim /ansible/jinja2/tes ...
- Github个人首页美化指北
当你尝试去创建一个与你Github用户名相同的仓库时,会发现这是Github为你预留的特殊仓库,用来作为你的Github Profile,这个仓库就相当于一个可以显示在你Github个人页的READM ...
- day22 Pyhton学习 re模块和正则表达式
正则表达式本身也和python没有什么关系,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个" ...
- JAVA Schedule的Cron表达式
spring中用到的定时任务,一般用到的有Timer()和Schedule Cron表达式一般是程序的定时任务中所要起的..我们用的springboot中的@Schedule中,启动类中添加enabl ...
- jmeter_02_目录文档说明
jmeter目录文档说明 bin目录是可执行文件 jmeter.bat 是启动文件 可以启动jmeter. 使用notpad++ 等文本编辑器打开 bat文件 可以配置jvm的参数 比如堆内存[Hea ...