DOM：事件代理

事件代理

网页设计中的一种思想，利用事件对象中引用的目标对象这个技术来实现的

无论事件触发时 是不是目标对象的监听器 在监听器内部的事件对象event中都可以访问这个事件的目标对象,利用这个特点去绑定事件给父级元素 来代理子级元素的业务,这种设计就是事件代理。

事件代理的优点：

1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适

 

事件代理的缺点：

1.静态的事件绑定:如果动态的添加元素进去  添加进去的元素没有这个事件

2.性能消耗更高  业务却相同

3.如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

 

例：

<div class="box1">
        <div class="box2">hello1</div>
    <div class="box2">hello2</div>
    <div class="box2">hello3</div>
    <div class="box2">hello4</div>
</div>

 

没有事件代理需要把多个相似元素手动绑定事件：

var box1=document.querySelector(".box1")
var box2=document.createElement("div")
box2.className="box2"
box1.appendChild(box2)

 

事件代理后：

 

var box1=document.querySelector(".box1")
box1.addEventListener("click",function(e){
    console.log(e.target.innerHTML)
})

 

获取各个节点：

var box1=document.querySelector(".box1")
box1.addEventListener("click",function(e){
    console.log(e.target)//事件的目标对象
    console.log(e.srcElement)//事件的目标对象
    console.log(document.documentElement)//html元素
    console.log(document.body)//body元素
    console.log(document)//根节点
})