A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© sangwentao 中级黑马   /  2016-6-21 19:27  /  1412 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

列表事件委托思想:循环判定事件触发源是哪个li,然后执行相应操作。
题目:点击
    - 1
    - 2
    - 3
用事件委托来实现点击弹出当前li的下标。
PS:“事件处理程序过多”问题的解决方案就是事件委托。
事件委托利用的是事件冒泡机制,只制定一事件处理程序,就可以管理某一类型的所有事件(使用事件委托,只需在DOM书中尽量最高的层次上添加一个事件处理程序)。
我们平常用的方法是给每一个li上绑定一个onclick事件来弹出当前li的下标。
var li = document.getElementsByTagName_r('li');
for(var i=0;i<li.length;i++){
    li[i].onclick=(function(){
        return function(n){
            alert(n);
        }
    })(i+1);
}
如果使用事件委托如下:

var ul = document.getElementByIdx_x_x("ul");
var li = document.getElementsByTagName_r('li');
/*
//方法二
ul.onclick = function(event){
for(var i = 0;i<=li.length;i++){
if(event.target==li[i]){
alert(i);
}
}
}

事件委托的好处:1、代码书写量少;2、较于之前的写法比较我们只需添加一个事件处理机制而之前的我们必须要给每一个<li>都加一个事件,这样占用的内存就少;3、既然所占内存少,代码量少,处理时所需的时间也就少了!
http://blog.sina.com.cn/s/blog_abeef32d01017szg.html

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马