js事件委托

事件委托也称事件代理,JavaScript高程上讲:事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理这一类型的所有事件。
举个栗子,我有一个ul标签,下面有很多li标签,每个li标签都需要添加事件,难道我们要获取每个li然后在添加事件吗? 这样太浪费内存了,也不利于网页性能优化,我们要尽可能减少dom操作,所以我们能不能只给ul添加点击事件,然后利用事件冒泡,这样每个li标签都有事件了,

何为冒泡

我的页面是这样一个结构div > ul >( li >a)*20,即有20个li标签,每个li下面又有一个a标签,如果点击a标签,事件就会向外递进(a->li->ul->div),依照这个特性,我们是不是可以只给div添加点击事件,当点击a、li时的时候就会冒泡到div,从而执行div的点击事件,这就是事件委托,委托给他们的父辈元素(emmmm不知道我讲清楚了没有~~(>_<)~~);

实践

var Ul = document.getElementsByTagName("ul")[0];
  Ul.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;  //srcElement是IE的说法
    if(target.nodeName.toLowerCase() == 'li'){
         alert(target.innerHTML);
    }
  }
<ul>
    <li><a>111</a></li>
    <li><a>222</a></li>
    <li><a>333</a></li>
    <li><a>444</a></li>
</ul>

上面代码就是给ul添加一个点击事件,如果被点击的对象nodeName是li,即被点击的是li标签则输出当前li的innerHTML。
最常见的是每个li标签执行的事件不同,这又该怎么解决呢?

我们可以给每个li标签添加类名,或者id,判断当前对象的类名或id,当被操作的li标签是这个类名或id则执行对应的函数,如果不是则不执行这个函数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值