JS中这句话怎么理解

Question

html

<ul id = "user-list">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
  <li>赵六</li>
</ul>

js

let list = document.querySelector("#user-list")
let items = document.querySelectorAll("#user-list > li")

list.addEventListener('click', function(e) {
    if(e.target.tagName === "LI") {  //请问这2行怎么理解？
      let item = e.target
    
    items.forEach(function(item) {
        item.style.background = "inherit"
      item.style.color = "inherit"
    })
    
    item.style.background = "black"
    item.style.color = "white"
    
    console.log(item.innerHTML)
  }
})

Answer 1

获取当前监听对象的标签名字，默认是大写的，不需要过多解读

Answer 2

let list = document.querySelector("#user-list")
let items = document.querySelectorAll("#user-list > li")

list.addEventListener('click', function(e) {//监听click事件 有可能是ul 有可能是li
    if(e.target.tagName === "LI") {  //如果click事件是li的click事件
      let item = e.target//获取当前点击的那个li 
    
    items.forEach(function(item) {
        item.style.background = "inherit"
      item.style.color = "inherit"
    })
    
    item.style.background = "black"
    item.style.color = "white"
    
    console.log(item.innerHTML)
  }
})

Answer 3

e.target 是你鼠标移上去的元素,他的标签名

Answer 4

if(e.target.tagName === "LI") { //如果点击的目标元素的标签名为li 则将li存入item变量
      let item = e.target

Answer 5

e.target返回的触发事件的节点，这里就是判断点击事件的节点DOM是不是li标签