事件监听
目标:能够给DOM
元素添加事件监听
什么是事件:事件是在编程时系统内部发生的动作或者发生的事件,比如单击一个按钮。
语法:
元素对象.addEventListener('事件类型',要执行的函数)
<!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>
<style>
</style>
<body>
<button>点击</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
console.log(1)
})
</script>
</body>
</html>
事件监听版本:
-
DOM L0:
事件源.on事件 = function(){} -
DOM L1:
事件源.addEventListener(事件,事件处理函数)
区别:
on方式会覆盖,addEventListener不会。
事件类型:
UI事件:
click:点击事件
dblclick:双击事件
mousedown:鼠标按键被按下
mouseup:鼠标按键被释放
mousemove:鼠标被移动
keydown:键盘按下
keyup:键盘释放
焦点事件:
focus:元素获得焦点
blur:元素失去焦点
文档事件:
load:页面或图片等资源加载完成
beforeunload:页面即将卸载
unload:页面完全卸载
abort:加载操作被用户取消或加载失败
error:在加载过程中发生错误
环境对象:
指的是函数内部特殊的变量this,它代表当前函数的运行时所处环境。
<!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>
<style>
</style>
<body>
<button>点击</button>
<script>
function fn(){
console.log(this) //this指向window
}
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
console.log(this) //this指向btn
})
</script>
</body>
</html>
谁调用this就是指向谁。
回调函数:
如果将函数A作为参数传递给函数B时,我们称A为回调函数。
function fn(){
console.log('我是回调函数')
}
setInterval(fn,1000)
事件流:
事件流的二个阶段:
事件流:指的是完整的执行过程中的流动路径,分为捕获阶段和冒泡阶段(主用)。
事件捕获:
从DOM的根元素开始去执行对应的事件(从外到里)
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
addEventListener
第三个参数是true
代表捕获阶段,false
(默认)代表冒泡阶段。
事件冒泡:
当一个元素的事件被触发时,会依次调用上级调用的所有父级元素的同名事件。
阻止冒泡:
若想把事件限制在当前元素内,就需要阻止事件冒泡。
document.getElementById("parent").addEventListener("click", function(event){
event.stopPropagation(); // 阻止事件冒泡
// 在这里处理事件
});
事件解绑:
事件源.on事件 = function(){} 通过事件源.事件类型=null
在Web开发中,事件解绑是指移除已经绑定到元素上的事件监听器。这通常是为了提高性能,防止内存泄漏,或者在某些情况下,不再需要某个事件监听器时清理事件监听。
在JavaScript中,可以使用事件对象的removeEventListener方法来解绑事件。这个方法需要两个参数:一个是事件类型,另一个是事件处理函数。下面是一个简单的例子:
// 首先绑定一个事件处理函数
document.getElementById("myElement").addEventListener("click", myEventHandler);
// 然后解绑同一个事件处理函数
document.getElementById("myElement").removeEventListener("click", myEventHandler);
// 函数定义
function myEventHandler(event) {
console.log("元素被点击");
}
如果你想要解绑所有的事件监听器,可以传递空函数作为事件处理函数:
document.getElementById("myElement").removeEventListener("click", function(){});
如果你想要解绑所有类型的事件监听器,可以传递"*"作为事件类型:
document.getElementById("myElement").removeEventListener("*", myEventHandler);
请注意,解绑事件监听器时,需要确保传递的事件类型和事件处理函数与之前绑定的一致,否则解绑操作将不会生效。
事件委托
事件委托是利用事件流的特征解决开发需求的知识技巧
优点:减少注册次数,提高程序性能。
原理:给父元素注册事件,当我们触发子元素时,会冒泡到父元素身上,从而触发父元素的事件。
// 假设有一个包含多个按钮的列表
const buttons = document.getElementById("buttonContainer").getElementsByTagName("button");
// 绑定一个事件处理函数到父元素上
document.getElementById("buttonContainer").addEventListener("click", function(event){
// 事件对象包含了关于事件的详细信息
const target = event.target; // 指向触发事件的元素
if (target.tagName === "BUTTON") {
// 根据触发事件的按钮执行相应的操作
console.log("按钮被点击:", target.textContent);
}
});
e.preventDefault() //阻止默认提交