委托/代理:我们自己不方便做一件事,委托别人帮我们去做
事件委托/事件代理:一些标签不方便绑定事件,需要委托另一个标签绑定事件
事件委托的原理:事件冒泡,由于子标签可以冒泡给父标签,所以父标签可以代理子标签的事件绑定
事件委托的缺点:只能由父标签来代理子标签的事件委托
事件委托的优点:优化代码,减少代码量,优化性能,提高效率
优化:浏览器中事件绑定的个数越少,浏览器性能小号越低,所以此处可使用事件委托机制,让父元素div代理所有子元素的事件,指定一个事件即可
var div=document.getElementById('box')
div.οnclick=function(e){
console.log(this, e.target, e.currentTarget)
// this == e.currentTarget == 事件绑定的目标元素 == div
// e.target == 事件触发的目标元素 == div/button/span/i
alert(e.target.innerText)
// 通过标签的nodeName/tagName节点名来区分不同的子标签
console.log(e.target.nodeName, e.target.tagName)
}