Fe-interview: [js] 第97天 写例子说明如何给li绑定事件（ul下有1000+个li）？

[haizhilin2013]

第97天 写例子说明如何给li绑定事件（ul下有1000+个li）？

[NicholasBaiYa]

使用jq
$("ul>li").on("click","function(){}")

[Konata9]

在不考虑任何情况时，直接使用 $('li').addEventListener(event, fun) 就可以对 li 进行事件绑定。

当子元素过多时，可以利用“事件冒泡”在 ul 上进行绑定，实现事件委托。可以利用 event.target 对被触发的子元素进行操作。

document.getElementsByTag('ul')[0].addEventListener('event', (e) => {
    // 利用 e.target 对冒泡上来的元素做区分
    // e.target.nodeName, e.target.id 等
})

参考文章：实例分析JavaScript中的事件委托和事件绑定

[nowherebutup]

首选事件代理

  <ul>
    <li>1111111111111</li>
    <li>2222222222222</li>
    <li>3333333333333</li>
    <p>44444444444</p>
  </ul>
  <script>
    document.querySelector('ul').addEventListener('click', function (e) {
      if (e.target.tagName === 'LI') {
        // ...
      }
    })
  </script>

[xxf1996]

用事件委托直接将事件绑定在父元素上，通过target属性判断是否为子元素触发事件；

[xiangshuo1992]

使用jq
$("ul>li").on("click","function(){}")

稍微优化一点点

$(".xxxul").on(".xxxli","click","function(){}")

[LinStan]

<ul id = "uu">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
<script>
//最基础的方法
var ull = document.getElementById("uu");
var list = ull.getElementsByTagName("li");
//给每个li绑定事件
for(var i = 0;i<list.length;i++){
list[i].onclick = function(){
this.style.color = "red";
  }
}
//基于Jquery实现
$("ul>li").on("click",function(){ this.style.color="red" })
//基于事件绑定实现
document.getElementById("uu").addEventListener("click", (e) => {
  if(e.target.tagName==="LI"){
    console.log(e)
    e.target.style.color="red"
  }
})
</script>

[JiangXue93]

采用事件委托，加switch-case是为了处理不同子元素的事件。

`<ul>
        <li id='1'>1</li>
        <li id='2'>2</li>
        <li id='3'>3</li>
    </ul>
    <script>
        $('ul').click(function(e) {
          switch(e.target.id){
            case '1':
              console.log(1)
              break;
            case '2':
              console.log(2)
              break;
            default:
              console.log('default')
          }
        })
    </script>`

[Drowned-fish]

这题明显考的是事件委托，利用事件冒泡的原理把事件绑定到父元素，在父元素识别是哪个子元素触发。

[xueweb]

难道不toUpcase下吗？ 把e.target.tagName 变成大写？