首页 > Web开发 > 详细

关于js中的事件委托小案例

时间:2017-03-03 12:06:49      阅读:229      评论:0      收藏:0      [点我收藏+]

需求:页面上有一个按钮,和一个空的ul,要求点击按钮,会给ul中动态添加li元素,然后,点击动态添加的元素,在控制台上输出,这是第几个元素

<ul>
        
</ul>
<button>点击增加</button>
    var ul = document.querySelector(‘ul‘);
    var btn = document.querySelector(‘button‘);
  //动态添加元素 btn.addEventListener(
‘click‘,function(){ var li = document.createElement(‘li‘); li.innerHTML=‘我是新添加的li元素‘; ul.appendChild(li); }) ul.addEventListener(‘click‘,function(e){ var lis = document.querySelectorAll(‘li‘); for (var i = 0; i < lis.length; i++) { lis[i].index=i } var tag = e.target;//获取当前点击的元素节点 if (tag.nodeName.toLowerCase()==‘li‘) {//使用元素节点的nodeName属性获得元素的名称,并转换为小写,判断是不是我们想要的 console.log(tag.index);//如果是,就输出对应的索引值 } });

 

关于js中的事件委托小案例

原文:http://www.cnblogs.com/songdongdong/p/6495564.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!