©2020-2024 ioDraw All rights reserved
<>事件监听
*
addEventListener()方法
*
参数1为具体的事件
*
参数2为事件触发后的函数
语法：
元素.addEventListener('click（具体的事件）',function(e) { // 事件触发后处理的函数代码 })
<>解绑事件
* 传统方式解绑事件 元素.onclick = null;
* 方法监听解绑事件的方式 元素.removeEventListener('具体的事件',绑定事件时的回调函数名)
解绑事件的代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="
viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
title> </head> <body> <button class="btn1">按钮1</button> <button class="btn2">
解绑事件</button> <script> let btn = document.querySelector('.btn1'); let btn2 =
document.querySelector('.btn2'); var onclickFunc = function(e) { console.log(e);
alert('被点击') } var aaa = btn.addEventListener('click', onclickFunc); btn2.
addEventListener('click', function() { btn.removeEventListener('click',
onclickFunc) }) </script> </body> </html>
<>事件冒泡
当子盒子和父盒子都添加了点击事件，点击子盒子的时候会触发父盒子的点击事件，这就叫做事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="
viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
title> <style> .father { width: 100px; height: 100px; background-color:
aquamarine; margin: 0 auto; overflow: hidden; } .son { width: 50px; height: 50px
; background-color: blueviolet; margin: 25px auto; } </style> </head> <body> <
div class="father"> <div class="son"></div> </div> <script> let boxFather =
document.querySelector('.father'); let boxSon = document.querySelector('.son');
boxFather.onclick = function() { console.log('父盒子被点击'); } boxSon.onclick =
function() { console.log('子盒子被点击'); } </script> </body> </html>
<>事件对象
什么是事件对象？
*
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
*
谁绑定了这个事件。
*
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
*
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
事件对象的e.target 和 this的区别：
* 当在没有事件冒泡的时候，e.target 和 this 没有区别 完全一样
* 当有了冒泡事件，this指向的是绑定事件的元素，而e.target 指向的是被点击的元素
<>阻止事件冒泡
语法：
给父盒子添加
事件对象.stopPropagation();
<>事件委托
巧妙使用事件冒泡
事件委托也称为事件代理，在 jQuery 里面称为事件委派。
说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。