我们先来讲一下何为事件对象，何为事件委托。
事件对象：当触发一个事件后，该对象中保存了所有与该事件相关的数据。例如点击了哪里、单击还是双击、触发的时间、触发事件的元素信息等等之类.
事件委托：由于事件绑定的冒泡特性，即：子元素可以触发其父级元素上绑定的事件。所以我们可以通过给父元素绑定事件，达到让多个子元素都触发该事件的目的，这种绑定方式就叫做事件委托。
事件委托主要解决了两个问题。
1、使用普通的事件绑定无法给通过JS动态添加进来的元素绑定事件。
2、当我们需要同时给很多元素绑定相同的事件时，使用事件委托只需要绑定一次。
先来看以下的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件对象与事件委托</title>
<script src="./jquery.js"></script>
</head>
<style>
#box1 {
height: 200px;
width: 200px;
background-color: antiquewhite;
}
#box2 {
height: 100px;
width: 100px;
background-color: rgb(151, 104, 43);
}
#box3 {
height: 100px;
width: 100px;
background-color: rgb(126, 117, 105);
}
</style>
<body class="" id="body">
<div id="box1">
<div id="box2">
</div>
<div id="box3">
</div>
</div>
<script type="text/javascript">
//原生JS的事件委托与事件对象
// var box1 = document.getElementById('box1');
// box1.onclick=function(e){
// console.log(e.target); //触发节点元素
// console.log(e.currentTarget);//绑定节点元素
// console.log(this);//绑定节点元素
// }
//jquery的事件委托与事件对象
// $('#box1').click(function(e) {
// console.log(e.target);//触发节点元素
// console.log(e.currentTarget);//绑定节点元素
// console.log(this);//绑定节点元素
// });
//jquery中的事件委托专用方法on
//语法含义为：给父元素绑定了click事件，on方法的参数二指定了可以触发该事件的子元素
$('#box1').on('click', '#box2,#box3', function(e) {
console.log(e.target);//触发节点元素
console.log(e.currentTarget);//触发节点元素
console.log(this);//触发节点元素
});
</script>
</body>
</html>
以上代码中，我们分别使用原生js语法和jquery语法，把想要在子元素上触发的click事件绑定到了父元素上，即子元素将事件委托给了父元素。
前面两种是通用的绑定方式，第三种是jquery的on语法，三者有个共同点，那就是，它们都在事件函数中有一个形参e。
当事件函数被触发时，JS默认会给事件函数的第一个参数传入事件对象，所以我们在事件函数中使用一个形参来接收这个事件对象。
然后我们又分别打印了事件对象target属性、currentTarget属性和this。
总结如下：
通过原生JS和jquery绑定的通用事件委托函数中，target为触发节点元素，currentTarget为绑定节点元素，this为绑定节点元素。
通过jquery的on方法绑定的事件委托函数中，target、currentTarget和this均为触发节点元素。
当然，在jq中还有很多种实现事件委托的方法，这里我们只说最常用的，大家先把这些知识点掌握了再说。
以上逻辑是非常重要的，请大家务必认真思考，并动手练习一下。
|
窥视卡
雷达卡
发表于 2023-1-27 12:50:59
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
