click与addEventListener和removeEventListener事件详解
事件 详解 click addEventListener
2023-09-27 14:22:17 时间
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
相关文章
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
- vs2017后期生成事件命令行:
- Elasticsearch使用syslog发送Watcher告警事件
- android事件详解
- QT中QThread的各个方法,UI线程关系,事件关系详解(4)
- QT中QThread的各个方法,UI线程关系,事件关系详解(2)
- QT中事件发送函数sendEvent()、postEvent()详解
- C# 中的委托和事件(详解) ....
- JS事件模型小结
- android事件拦截处理机制详解
- 手写实现Vue核心功能EventBus事件派发机制
- 微信小程序事件绑定
- js中鼠标滚轮事件详解
- 微信公众号平台开发-事件推送
- JavaScript事件代理和事件委托
- Untiy-委托[delegate]和事件[event]详解和区别(二)
- Silverlight+WCF 新手实例 象棋 主界面-事件区-求和认输(三十二)
- android学习之4种点击事件的响应方式
- Cocos2d-X研究之v3.x 事件分发机制具体解释
- 【GD32】从0开始学GD32单片机(6)—— EXTI中断/事件控制器详解+串口接收中断及外部按键中断例程
- c#事件使用示例详解
- BarManager菜单栏加载与菜单项点击事件详解|devExpress教程
- 黑客勒索苹果事件新进展:媒体验证54个iCloud账号全都有效
- W3C 事件切换 颜色变化
- 详解 QT 源码之 Qt 事件机制原理