<!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>
ul{background: #ccc}
li{padding: 10px 0;margin: 10px 0;background: red}
</style>
</head>
<body>
<ul>
<li>link1</li>
<li abc="l">link2</li>
<li abc="l">link3</li>
<li abc="l">link4</li>
<li>link5</li>
</ul>
</body>
<script>
// var ali = document.querySelectorAll("ul li");
// for(var i=0;i<ali.length;i++){
// ali[i].onclick = function(){
// console.log(this.innerHTML)
// }
// }
var oul = document.querySelector("ul")
oul.onclick = function(eve){
var e = eve || window.event;
var t = e.target || e.srcElement;//target 属性规定哪个 DOM 元素触发了该事件。//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 //鼠标真实点到的那个元素
if(t.getAttribute("abc") == "l"){
console.log(e.target.innerHTML)
}
}
// 事件委托：
// 将多个相同元素的相同事件，添加给页面上现存的共同的父元素，利用事件冒泡，配合事件源，找到真正点击的元素。
// 优势：
// 1.节省性能
// 2.可以给页面上暂时不存在的元素绑定事件
// 缺点：
// this不好用了
</script>
</html>