首先事件委托是什么？ 比如，一个div，里面包含了20个div子节点，此时需要为20个子节点绑定事件，如果不使用事件委托，那就需要获取到20个子节点数组，并且遍历这个数组为每一个子节点绑定事件。但是如果使用事件委托，那么只需要为他的父亲绑定事件即可。
事件委托的优点：
优化性能，节约内存
如果有1w的子节点，那么1w的子节点需要绑定1w个事件，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>
<style>
.target {
width: 100px;
height: 20px;
background: #35662b;
text-align: center;
color: #ffffff;
margin: 10px;
padding: 5px;
}
#success {
width: 200px;
height: 300px;
background: #fd9191;
margin: 0px 10px;
text-align: center;
}
#failed {
width: 200px;
height: 300px;
background: #32ccf7;
text-align: center;
}
</style>
<body>
<div id="par">
<div class="target" draggable="true">challenger1</div>
<div class="target" draggable="true">challenger2</div>
<div class="target" draggable="true">challenger3</div>
<div class="target" draggable="true">challenger4</div>
</div>
<div style="display: flex">
<div id="success">
<h1>success</h1>
</div>
<div id="failed">
<h1>failed</h1>
</div>
</div>
</body>
<script>
let target = null;
// 使用事件委托
const par = document.querySelector("#par");
par.addEventListener("dragstart", function (event) {
target = event.target;
event.dataTransfer.setData("text/plain", event.target.value);
});
// 不使用事件委托
// const targets = document.getElementsByClassName("target");
// for (let i = 0; i < targets.length; i++) {
// targets[i].addEventListener(
// "dragstart",
// function (evnt) {
// target = event.target;
// event.dataTransfer.setData("text/plain", event.target.value);
// },
// false
// );
// }
document.addEventListener(
"drop",
function (event) {
let currentDom = event.target;
console.log(currentDom);
if (currentDom.id === "success" || currentDom.id === "failed") {
currentDom.appendChild(target);
console.log(event.dataTransfer.getData("text/plain"));
}
},
false
);
/*
监听 dragover 事件，并且 event.preventDefault()
否则 document 监听drop将不会触发
*/
document.addEventListener(
"dragover",
function (event) {
event.preventDefault();
},
false
);
</script>
</html>
代码就放在这里，小伙伴们自行拿去尝试即可。
