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

2021-10-25  本文已影响0人  my木子
// 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)
// 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))
  }
上一篇 下一篇

猜你喜欢

热点阅读