利用事件委托实现点击li列表

  • 事件委托就是事件冒泡加事件源,给父类元素绑定事件,来监听子元素的冒泡事件,并找到是哪个子元素(事件源)的事件点击事件绑定在 ul 上
// html
 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
// js
 var uls = document.getElementsByTagName('ul')[0];
  uls.addEventListener('click', function (e) {

    var event = e || window.event;

    //监听事件源
    var src = event.target || event.srcElement;
    console.log(src.innerText);
  }, false)
  • 给单个 li 添加点击事件
// html
 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
// js
  var lis = document.getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
    //防闭包
    (function (j) {
      lis[i].addEventListener('click', function () {
        console.log(lis[j].innerText);
      }, false)
    }(i))
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容