事件代理：事件代理：网页设计中一种设计思想，利用事件对象中引用的目标对象这个技术来实现的；无论事件触发时，是不是目标对象的监听器，在监听器内部的事件对象event中都可以访问这个时间的对象，利用这个特点去绑定事件给父元素，来代理子元素的业务，这种设计就是时间代理。
用在相同的绑定事件上。
举例：
<body>
<div class="box">
<div class="box2">hello1div>
<div class="box2">hello2div>
<div class="box2">hello3div>
<div class="box2">hello4div>
div>
<script>
var box2s=document.querySelectorAll(".box2")
box2s.forEach(function(el){
el.onclick=function(){
console.log(el.innerHTML)
}
})
script>
//点击谁就打印谁的innerHTML
这样的设计缺点：
再上述功能下再加上点击按钮实现元素的添加，点击元素打印其内容
<div class="box">
<div class="box2">hello1div>
<div class="box2">hello2div>
<div class="box2">hello3div>
<div class="box2">hello4div>
div>
<button>点击添加一个hellobutton>
<script>
var box2s = document.querySelectorAll(".box2")
box2s.forEach(function (el) {
el.onclick = function () {
console.log(el.innerHTML)
}
})
var btn=document.querySelector("button")
btn.onclick=function(){
function load1() {
var box = document.querySelectorAll(".box")
var box2 = document.createElement("div")
box2.innerHTML = "hello5"
box2.className = "box2"
box.appenChild(box2)
}
}
但是这样虽然能添加一个新的元素但是还是不能实现点击新的元素打印其内容，而且每次运行代码时，会生成若干个点击事件，造成资源浪费。这是我们就可以使用时间代理来优化。
我们给父元素添加一个点击事件，找出事件对象，打印其innnerHTML的值就可以了
var box1 = document.querySelectorAll(".box")
box1.addEventListener("click", function (el) {
//el是每个事件本身
//el.target就是元素本身
console.log(el.target.innerHTML)
})
这样就可以利用几行代码实现上面若干行代码的功能，而且也不会造成资源浪费