事件的委托
事件的對(duì)象
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>事件的對(duì)象</title>
<style>
#box{
width:900px;
height:400px;
background:silver;
}
ul{
background:#999999;
width:400px;
}
li{
width:300px;
height:30px;
margin-bottom:10px;
background:pink;
line-height:30px;
list-style:none;
}
</style>
</head>
<body>
<div id ='box'>
<button>點(diǎn)擊</button>
<ul>
<li>第一個(gè)</li>
<li>第二個(gè)</li>
<li>第三個(gè)</li>
<li>第四個(gè)</li>
</ul>
</div>
<script>
/*
事件有 ：?jiǎn)螕羰录髽?biāo)事件，鍵盤事件等
click、 mousemove、keydown 等
事件對(duì)象
* - 當(dāng)事件的響應(yīng)函數(shù)被觸發(fā)時(shí)，瀏覽器每次都會(huì)將一個(gè)事件對(duì)象作為實(shí)參傳遞進(jìn)響應(yīng)函數(shù),
* 在事件對(duì)象中封裝了當(dāng)前事件相關(guān)的一切信息，
比如：鼠標(biāo)的坐標(biāo) 鍵盤哪個(gè)按鍵被按下 鼠標(biāo)滾輪滾動(dòng)的方向。。。
*/
//給按鈕綁定點(diǎn)擊事件
var btn = document.querySelector('button');
btn.onclick = function(event){
// 參數(shù)event包括了這個(gè)事件相關(guān)的一切信息
console.log(event);
//打印結(jié)果看 圖一
}
/*
btn.addEventListener('click',function(event){
console.log(event)
})
*/
</script>
</body>
</html>
事件委托1.jpg
事件的委托
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>事件委托</title>
<style>
#box{
width:900px;
height:400px;
background:silver;
}
ul{
background:#999999;
width:400px;
}
li{
width:300px;
height:30px;
margin-bottom:10px;
background:pink;
line-height:30px;
list-style:none;
}
</style>
</head>
<body>
<div id ='box'>
<button>點(diǎn)擊</button>
<ul>
<li>第一個(gè)</li>
<li>第二個(gè)</li>
<li>第三個(gè)</li>
<li>第四個(gè)</li>
</ul>
</div>
<script>
/*
事件托管
因?yàn)槭录芭莸拇嬖?，所以可以通過 給需要綁定事件的元素 的父元素綁定事件，這就是事件委托
比喻 ul下有四個(gè)li，我需要給每個(gè)li綁定單擊事件，有兩個(gè)方法，
方法一： 通過遍歷，給每個(gè)li綁定單擊事件。
方法二： 通過事件委托 ，給li的父元素 ul 綁定單擊事件
*/
//獲取ul
var ul = document.querySelector('ul');
//給ul綁定單擊事件
ul.onclick = function(event){
/* event.target
指的是你點(diǎn)擊的元素 ，比如你點(diǎn)擊第一個(gè) li ，event.target 指的就是第一個(gè)li ，
點(diǎn)擊第二個(gè)li ，event.target就是指第二個(gè)li
event.target.localName
指的是你點(diǎn)的元素的標(biāo)簽名，你點(diǎn)擊的是li，event.target.localName 就是li，
你點(diǎn)擊的是ul，event.target.localName 就是ul
*/
console.log(event.target)
/* event.currentTarget
指的是你綁定事件的元素，這里綁定元素的事件ul，這個(gè)event.currentTarget
指的就是 ul
*/
console.log(event.currentTarget)
}
/*
自定義屬性
自定義一個(gè)屬性來存儲(chǔ)數(shù)據(jù)
<li data = 'xxx'></li>
*/
var arr=[001,002,003,004,005,006]
for(var i = 0 ; i<arr.length;i++){
ul.innerHTML += `<li data=${arr[i]}>第${i+5}</li>`
}
</script>
</body>
</html>
事件委托2.jpg
事件委托3.jpg
