Event事件之事件源
事件源
Event事件對象
e.target 事件源
e.currentTarget 事件綁定的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
}
p{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
var div=document.querySelector('div');
var p=document.querySelector('p');
div.addEventListener('click',function(e){
console.log("e.target: ");
console.log(e.target);
console.log("e.currentTarget: ");
console.log(e.currentTarget);
})
</script>
</body>
</html>
注意：e.target 事件觸發的目標源元素，它可能會有變化，因爲是目標源元素。
e.currentTarget 事件綁定的元素，它是固定不變的，因爲事件綁定的元素是不變的。
事件委託（事件代理）
- 利用冒泡機制將事件統一委託在父級上執行，在通過事件源獲取到相關元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li{
width: 100px;
height: 100px;
background: red;
margin: 50px 0;
}
</style>
</head>
<body>
<div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<script>
var ul=document.querySelector('ul');
ul.addEventListener('click',function(){
alert('點擊事件');
})
</script>
</body>
</html>
點擊ul和li都會觸發事件。
其實原理是你點擊子級，父級會接收到它父級冒泡的行爲（因爲子級就在父級裏邊，點擊子級就相當於也點了父級），而打算給li加事件，目的是爲了改變li的某種特性。假如讓li點擊之後背景色變黃，怎麼實現？這裏給ul添加事件，而不能操作ul本身，需要操作li的本身，因此這裏就可以用到事件對象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li{
width: 100px;
height: 100px;
background: red;
margin: 50px 0;
}
p{
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>
</div>
<script>
// 事件委託（父級）
var ul=document.querySelector('ul');
// li點擊之後背景色變黃
ul.addEventListener('click',function(e){
// 獲取事件源 元素
console.log(e.target);
})
</script>
</body>
</html>
我們藉助事件源來修改樣式，就可以實現我們的需求了。
// 事件委託（父級）
var ul=document.querySelector('ul');
// li點擊之後背景色變黃
ul.addEventListener('click',function(e){
e.target.style.background='yellow';
})
雖然改變了事件源（li）元素的樣式，但只給ul添加了事件，這其實就叫事件委託。就相當於把事件加給別人，但是自己觸發的時候還能用這個事件。
但是假如只想修改li的樣式呢？
判斷目標元素是否是你想添加事件的元素
// 事件委託（父級）
var ul=document.querySelector('ul');
// li點擊之後背景色變黃
ul.addEventListener('click',function(e){
console.log(e.target.tagName);
})
tagName是便籤名稱，注意它是大寫的。
因此我們可以藉助事件源名稱判斷是否爲li，這樣我們的需求就實現了。
// 事件委託（父級）
var ul=document.querySelector('ul');
// li點擊之後背景色變黃
ul.addEventListener('click',function(e){
// 判斷目標元素是否是你想添加事件的元素
if(e.target.tagName=='LI'){
e.target.style.background='yellow';
}
})
（後續待補充）