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 ...
随机推荐
- powershell中使用Get-FileHash计算文件的hash值
今天在公司一台windows服务器上.需要对两个文件进行比对,笔者首先就想到了可以使用md5校验 但是公司服务器上又不可以随意安装软件,于是笔者想到了可以试试windows自带的powershell中 ...
- CCNP:重发布及实验
重发布(又:重分布.重分发):一台设备同时运行于两个协议或两个进程,默认从两端学习到的路由条目不共享:重发布技术就是人为的进行共享. 一 满足: 1.必须存在ASBR --- 自治系统边界路由器-- ...
- 安装了高版本OS X 之后无法使用MacPorts的port命令
安装了高版本OS X 之后无法使用MacPorts的port命令 pod update提示: Current platform "darwin 14" does not match ...
- vue+less换肤,主题切换方案
新的项目对于客户自定义要求很高,然后换肤是其中一个很小的模块,经过了一段时间的摸索,看了许多文章,找到了几种方案. https://www.cnblogs.com/leiting/p/11203383 ...
- 基于Excel参数化你的Selenium2测试-xlrd
本篇文章转载至苦叶子: 前言 今天我们就如何使用xlrd模块来进行python selenium2 + excel自动化测试过程中的参数化进行演示说明,以解决大家在自动化测试实践过程中参数化的疑问 ...
- tensorflow(一):基础
一.张量 1.张量的概念 在TensorFlow中,所有的数据都通过张量的形式来表示.从功能的角度,张量可以简单理解为多维数组,零阶张量表示标量(scalar),也就是一个数:一阶张量为向量(vect ...
- DX12龙书 01 - 向量在几何学和数学中的表示以及运算定义
0x00 向量 向量 ( vector ) 是一种兼具大小 ( magnitude ) 和方向的量. 0x01 几何表示 几何方法中用一条有向线段来表示一个向量,其中,线段长度代表向量的模,箭头的指向 ...
- SpringBoot logback 配置文件自定义属性
添加自定义属性类 package com.cus.config; import ch.qos.logback.core.PropertyDefinerBase; import org.springfr ...
- centos7 samba安装教程
samba的用途:有的时候,我们需要在centos7 的文件能共享给其他机器. rpm -qa|grep samba yum install -y samba setenforce 0 sed -i ...
- 多测试_常用linux命令_002
linux 介绍 常用的操作系统(os): windows .dos.android.ios.unix.linux linux系统:是一个免费.开源的操作系统 支持多cpu,多用户,多线程的操作系统, ...