事件委托的作用
在孩子节点需要绑定多个点击事件的时候，可以直接使用事件委托，将点击事件绑定到父节点，利用事件委托就可以知道自己点击的孩子节点是谁了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../库/vue2.js"></script>
</head>
<body>
<div id="box" @click="test">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</div>
<script>
new Vue({
el: '#box',
methods: {
test(event) {
console.log(event.target)
}
}
})
</script>
</body>
</html>默认在不传参数的时候，在方法定义的第一个参数就是事件委托的对象
vue事件委托与参数同时使用
如果需要传参的同时，并且能够使用事件委托对象，可以这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../库/vue2.js"></script>
</head>
<body>
<div id="box" @click="test($event, 'ttt')">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</div>
<script>
new Vue({
el: '#box',
methods: {
test(event, a) {
console.log(event.target, a)
}
}
})
</script>
</body>
</html>原生js事件委托与参数同时使用
可以使用闭包，还有其他方法可以在这里发表哦，这也是事件传递参数的一种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="box">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
<script>
box.onclick = test("aaa")
function test(a) {
return function (evt) {
console.log(evt.target, a)
}
}
</script>
</html>