click与addEventListener和removeEventListener事件与移除正确的移除事件详解
1. onclick事件 es5
普通事件就是直接触发事件，相同的事件会被覆盖掉。代码如下：
let demoDiv=document.querySelector(".demo")
demoDiv.onclick = function(){
console.log('你好1')
}
demoDiv.onclick = function(){
console.log('你好2')
}
demoDiv.ondblclick = function(){
console.log('你好3')
}
输出的结果只会有<你好2>， <你好3>
就是说相同的事件绑定同一个元素会出现覆盖；
ps:双击的时候，默认会触发单击事件；
2. addEventListener事件 es6
addEventListener进行多次绑定相同的事件都能运行。不会出现事件覆盖
let demoDiv=document.querySelector(".demo")
demoDiv.addEventListener("click",function(){
console.log("点击111");
},false);
demoDiv.addEventListener("click",function(){
console.log("点击222");
},false);
最后会出现【点击111】和【点击222】
3.兼容性
浏览器的兼容性
ie9 以前：使用attachEvent/detachEvent进行绑定
ie9 开始：使用addEventListener进行绑定
4. 二者区别
addEventListener对任何DOM都是有效的，而onclick仅限于HTML
addEventListener可以控制listener的触发阶段,（捕获/冒泡）。
对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除。
总的来说：事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件
5. 移除 addEventListener事件
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
们都接受3个参数：如 addEventListener("事件名" , "事件处理函数" , "布尔值");
听别人说：现在的版本可以省略第三个参数，默认值为false
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；
同时需要注意的是通过addEventListener()添加的匿名函数无法移除
6.错误的移除方法
<body>
<div class="demo">点击我</div>
</body>
<script>
let demoDiv = document.querySelector(".demo");
demoDiv.addEventListener("click", function () {
console.log("点击111");
}, false);
demoDiv.removeEventListener('click', function (event) {
event.preventDefault();
}, false);
</script>
ps:通过addEventListener()添加的匿名函数无法移除
特别重要：这个例子中，
使用addEventListener()添加一个事件处理程序。
虽然调用removeEventListener()
是看似使用了相同的参数，但实际上，
第二个参数与传入addEventListener()中的那一个完全不同的函数。
而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同
7. 错误的用法
<body>
<div class="demo">点击我</div>
</body>
<script>
let demoDiv = document.querySelector(".demo");
function clickMy(event) {
console.log("点击了我111");
}
//页面渲染完成就触发了调用函数，这是错误的用法
demoDiv.addEventListener("click", clickMy(), false);
demoDiv.removeEventListener('click', clickMy(), false);
</script>
8.正确的移除方法
<body>
<div class="demo">点击我</div>
</body>
<script>
let demoDiv = document.querySelector(".demo");
function clickMy() {
console.log("点击了我111");
}
demoDiv.addEventListener("click", clickMy, false);
// 10s后这个事件将会被移除，没有直接去调用，没有括号
setTimeout(() => {
demoDiv.removeEventListener('click', clickMy, false);
}, 10000)
</script>
//这样移除的跟传入的就是同一个函数了
9.addEventListener()与removeEventListener()的第三个参数详解
布尔值参数是true，表示事件捕获
就是最不具体的节点先接收事件，
最具体的节点最后接收事件
(我们可以理解为；点击一个具体的元素，先触发顶级的节点，
然后向下进行传递，知道被点击的那个具体元素）
true捕获，false冒泡
如果是false，
开启事件冒泡
则是先寻找【具体指定的位置】由【最具体的元素】接收，
然后【逐级向上传播】至最不具体的元素的节点（或者说顶级节点）（文档）
10.开启冒泡
<body>
<div id="out">
<p>我没有用，我只占位</p>
<div id="middle">
<div id="inner">最里面</div>
</div>
</div>
</body>
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：inner-------middle------out
// 因为第三个参数是false,开启了事件冒泡
out.addEventListener('click', function () {
alert("我是最外面的");
}, false);
middle.addEventListener('click', function () {
alert("我是中间的");
}, false);
inner.addEventListener('click', function () {
alert("我是最里面的");
}, false);
</script>
11.开启捕获
<body>
<div id="out">
<p>我没有用，我只占位</p>
<div id="middle">
<div id="inner">最里面</div>
</div>
</div>
</body>
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out -------middle------inner
// 因为第三个参数是true开启了捕获
out.addEventListener('click', function () {
alert("我是最外面的");
}, true);
middle.addEventListener('click', function () {
alert("我是中间的");
}, true);
inner.addEventListener('click', function () {
alert("我是最里面的");
}, true);
</script>
12.得出结论
<body>
<div id="out">
<p>我没有用，我只占位</p>
<div id="middle">
<div id="inner">最里面</div>
</div>
</div>
</body>
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click', function () {
alert("我是最外面的");
}, true);
middle.addEventListener('click', function () {
alert("我是中间的");
}, false);
inner.addEventListener('click', function () {
alert("我是最里面的");
}, false);
// 结论：
// 第一条结论：true的触发顺序总是在false前面
// 第二条结论：如果多个均为true 则外层触发先于内层； 因为true是捕获，所以先触发外层
// 第三条结论：如果多个均为false 则内层触发先于外层 因为false是冒泡，所以先触发内层
</script>
文章参考的地址有：https://blog.csdn.net/gabby____/article/details/81812064
click与addEventListener和removeEventListener事件与移除正确的移除事件详解的更多相关文章
- 27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (转)addEventListener()与removeEventListener()详解
转自:http://www.111cn.net/wy/js-ajax/48004.htm addEventListener()与removeEventListener()用于处理指定和删除事件处理程序 ...
- WebView使用详解（二）——WebViewClient与常用事件监听
登录|注册 关闭 启舰 当乌龟有了梦想…… 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书 免费直播:AI时代,机器学习如何入门? 程序员8 ...
- 事件监听addEventListener()和removeEventListener() ---------1
一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- addEventListener()与removeEventListener(),追加事件和删除追加事件
addEventListener()与removeEventListener()用于追加事件和删除追加.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函 ...
- 封装兼容性添加、删除事件的函数 addEventListener与removeEventListener
var Event = { addHandler: function (oElement, sEvent, fnHandler) { oElement.addEventListener ? oElem ...
- JS添加事件和解绑事件：addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bi ...
- javascript -- addEventListener()和removeEventListener
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...
随机推荐
- 云图说 | 分布式缓存服务DCS—站在开源Redis前辈的肩膀上，扬帆起航
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:DCS基于开源Re ...
- SparkSQL的入门实践教程
摘要:Spark SQL是用于处理结构化数据的模块.与Spark RDD不同的是,Spark SQL提供数据的结构信息(源数据)和性能更好,可以通过SQL和DataSet API与Spark SQL进 ...
- 火山引擎DataTester分享：A/B实验中常见的8个错误
火山引擎DataTester是科学可信的A/B测试与智能优化平台,源自字节跳动长期沉淀,能够深度耦合推荐.广告.搜索.UI.产品功能等多种行业场景需求,为业务增长.转化.产品迭代,运营提效等各环节提供 ...
- HanLP — HMM隐马尔可夫模型 -- 语料库
隐马尔可可夫模型(Hidden Markov Model,HMM)是统计模型,用于描述一个含有隐含未知参数的马尔可夫过程. HMM由初始概率分布.状态转移概率分布和观测概率分布确定. BMES =&g ...
- Docker--简介&&安装
Docker 是一种应用容器引擎 一 容器 Linux系统提供了Namespace和Cgroup技术实现环境隔离和资源控制 其中Namespace是Linux提供的一种内核级别环境隔离的方法,能使一个 ...
- ABAP步循环
一.在界面中循环输出行数据,屏幕直接画出行数,需要计算翻页,一旦界面行数变动,则需要更改代码,所以引入步循环 二.步循环 首先在界面上画出要展示的内容 注意,在步循环中,文本的名称和输入框的名称不能相 ...
- Codeforces Round #733 (Div. 1 + Div. 2）
比赛链接:Here 1530A. Binary Decimal 现在规定一种只由0和1组成的数字,我们称这种数字为二进制数字,例如10,1010111,给定一个数n,求该数字最少由多少个二进制数字组成 ...
- Codeforces Round #666 (Div. 2) 题解报告
https://codeforces.com/contest/1397/problem/A 题意: 给定n个字符串,问重新组合以后是否能构成相同的n个字符串 思路: 直接判断所给的字符串的每种字母是否 ...
- 二、mysql安装（主从）
上一篇: 一.mysql5.7 rpm 安装(单机) https://www.cnblogs.com/yclh/p/14951314.html 环境 192.168.0.1 主节点 ...
- vue学习笔记 十六、params方式带参数的页面跳转
系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...