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
（後續待補充）