Event事件之事件监听器
事件监听器
事件监听和事件绑定的区别
xiao迪就不做太官方说明了,以一个十分简单的例子说明:同两个事件都会执行吗?
<!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>
div{
height: 200px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<div></div>
<script>
{
let div = document.querySelector("div");
div.onclick = function(){
alert(1);
};
div.onclick = function(){
alert(2);
};
}
</script>
</body>
</html>
事件绑定:后面的会覆盖上面的!
我们看看事件监听:
let div = document.querySelector("div");
div.addEventListener("click",()=>{
alert(1);
});
div.addEventListener("click",()=>{
alert(2);
});
事件监听,事件名称 不需要 加"on" ,并且不会相互覆盖。
事件流
<!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>
div{
height: 200px;
width: 200px;
background: red;
}
p{
width: 100px;
height: 100px;
background: blueviolet;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
{
let div = document.querySelector("div");
let p = document.querySelector("p");
div.addEventListener("click",()=>{
alert("div");
});
p.addEventListener("click",()=>{
alert("p");
});
}
</script>
</body>
</html>
我们发现了一个奇怪的事情,点击p标签,会触发两次事件。
我们可可以给document添加事件,来看看效果:
{
let div = document.querySelector("div");
let p = document.querySelector("p");
document.addEventListener('click',function(){
alert('document');
});
document.body.addEventListener('click',function(){
alert('body')
});
div.addEventListener("click",()=>{
alert("div");
});
p.addEventListener("click",()=>{
alert("p");
});
}
js当中有一个特性: 事件会冒泡
DOM树事件执行顺序 : html > body > div > p
p标签 包含在 div/body/html
事件冒泡:执行子元素事件同时,父元素如有同样事件,也会执行。
事件冒泡的执行顺序 : 由小到大 p > div > body > html
(后续待补充)