首页 » 文章 » 文档 » js web api问题 » 无限下拉的图片列表,如何监听每个图片的点击

无限下拉的图片列表,如何监听每个图片的点击

  • 事件代理
  • 用 e.target 获取触发元素
  • 用 matches 来判断是否是触发元素

代码演示:

<div id="div3">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<button>加载更多...</button>
</div>

a 的点击都通过 div3 来代理

// 事件绑定函数
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)

}

const div3 = document.getElementById('div3')
bindEvent(div3, 'click', event => {
    event.preventDefault() // 阻止默认行为
    const target = event.target
    if(target.nodeName === 'A'){
        alert(target.innerHTML)
    }
})
  • 代码简洁
  • 减少浏览器内存占用
  • 但是,不要滥用

»js web api问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top