e.target.tagName和e.target.dataset的作用是什么

最新推荐文章于 2025-06-14 22:26:49 发布

原创最新推荐文章于 2025-06-14 22:26:49 发布 · 3.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

博客介绍了在JavaScript中获取事件源（DOM对象），以及通过DOM对象属性获取标签名，可获取大写标签名，若要小写可用nodeName或转换后比较，还提到用e.target.dataset获取元素的值。

e.target 取得的是事件发生的对象，即事件源，它是 DOM 对象。

tagName 是 DOM 对象的属性，用于获取 DOM 对象的标签名，取出来是大写的，你要取小写的用 nodeName。或者用toLowerCase()把tagName转换成小写之后再进行比较。

e.target.dataset获取元素的值

 <div class="filter">
    <a data-index="1" href="javascript:;">0-100元</a>
    <a data-index="2" href="javascript:;">100-300元</a>
    <a data-index="3" href="javascript:;">300元以上</a>
    <a href="javascript:;">全部区间</a>
  </div>

document.querySelector('.filter').addEventListener('click', e => {
  const{tagName,dataset}=e.target
  if (tagName==='A'){
    let arr=goodsList
    if(dataset.index==='1'){
   arr= goodsList.filter(item =>item.price>0&&item.price<=100)
     } else if(dataset.index==='2'){
   arr= goodsList.filter(item =>item.price>=100&&item.price<=300)
      } else if(dataset.index==='3'){
   arr= goodsList.filter(item =>item.price>=300)
      }
     
    
    render(arr)
  }
})
</script>