事件的委托
事件的对象
<!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>点击</button>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</div>
<script>
/*
事件有 ：单击事件，鼠标事件，键盘事件等
click、 mousemove、keydown 等
事件对象
* - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
* 在事件对象中封装了当前事件相关的一切信息，
比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。。
*/
//给按钮绑定点击事件
var btn = document.querySelector('button');
btn.onclick = function(event){
// 参数event包括了这个事件相关的一切信息
console.log(event);
//打印结果看 图一
}
/*
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>点击</button>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</div>
<script>
/*
事件托管
因为事件冒泡的存在，所以可以通过 给需要绑定事件的元素 的父元素绑定事件，这就是事件委托
比喻 ul下有四个li，我需要给每个li绑定单击事件，有两个方法，
方法一： 通过遍历，给每个li绑定单击事件。
方法二： 通过事件委托 ，给li的父元素 ul 绑定单击事件
*/
//获取ul
var ul = document.querySelector('ul');
//给ul绑定单击事件
ul.onclick = function(event){
/* event.target
指的是你点击的元素 ，比如你点击第一个 li ，event.target 指的就是第一个li ，
点击第二个li ，event.target就是指第二个li
event.target.localName
指的是你点的元素的标签名，你点击的是li，event.target.localName 就是li，
你点击的是ul，event.target.localName 就是ul
*/
console.log(event.target)
/* event.currentTarget
指的是你绑定事件的元素，这里绑定元素的事件ul，这个event.currentTarget
指的就是 ul
*/
console.log(event.currentTarget)
}
/*
自定义属性
自定义一个属性来存储数据
<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
