事件委托代理

委托/代理:我们自己不方便做一件事,委托别人帮我们去做

事件委托/事件代理:一些标签不方便绑定事件,需要委托另一个标签绑定事件

事件委托的原理:事件冒泡,由于子标签可以冒泡给父标签,所以父标签可以代理子标签的事件绑定

事件委托的缺点:只能由父标签来代理子标签的事件委托

事件委托的优点:优化代码,减少代码量,优化性能,提高效率

优化:浏览器中事件绑定的个数越少,浏览器性能小号越低,所以此处可使用事件委托机制,让父元素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)
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值