美文网首页
利用事件委托实现点击li列表

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

作者: my木子 | 来源:发表于2021-10-25 13:36 被阅读0次
  • 事件委托就是事件冒泡加事件源,给父类元素绑定事件,来监听子元素的冒泡事件,并找到是哪个子元素(事件源)的事件点击事件绑定在 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))
  }

相关文章

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

    事件委托就是事件冒泡加事件源,给父类元素绑定事件,来监听子元素的冒泡事件,并找到是哪个子元素(事件源)的事件点击事...

  • JavaScript事件委托

    JavaScript事件委托 原理:利用事件的冒泡原理,当你点击ul>li时,会从最深的节点开始向外传播li>ul...

  • JavaScript事件代理(事件委托)

    简单说下为什么要有事件委托比如我们有1w个li, 要实现每个li点击触发事件, 如果对每个li都进行事件绑定那就太...

  • 编程题(一)

    一、用两个栈来实现一个队列 二、用纯JS实现,点击一个列表时,输出对应的索引 方法一:使用利用事件冒泡委托给列表的...

  • 事件委托 面试题

    给ul下面的li加上点击事件,点击哪个li,就显示那个li的innerHTML 委托给li上层的ul 兼容性

  • JS事件委托(事件代理)

    什么是事件委托? 举个例子,我们要实现点击 li 时打印其id 一般我们会给每一个li绑定一个事件处理函数 这种方...

  • 6-jQuery事件操作

    delegate(), undelegate() 事件委托把点击事件加到了ul身上, 利用冒泡原理 阻止事件委托 ...

  • javascript遍历&事件代理(委托)

    需求:如果需要给每个li添加点击事件。 一、常规实现方法:遍历每个li,给每个li单独加点击事件。 缺点:1、假如...

  • DOM操作,给ul下的li添加点击事件

    当有一个ul,下面有100个以上的li,给每一个li添加点击事件是非常耗性能的,解决方案:事件委托,委托给上级ul...

  • 事件委托

    实现的功能-------点击li的时候,弹出它的内容 原理:利用事件冒泡,和事件源对象进行处理 优点: 1.不需要...

网友评论

      本文标题:利用事件委托实现点击li列表

      本文链接:https://www.haomeiwen.com/subject/xwavyltx.html