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

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

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

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

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

首选事件代理

  <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>

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

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

稍微优化一点点

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

采用事件委托，加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>`

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

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

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

稍微优化一点点

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

事件委托： ul.addEventListener('click', function(e) {
if (e.target. tagName == 'LI') {
console.log(e.target.innerText)
}
})