对于一个无限下拉加载图片的页面，如何给每个图片绑定事件？ ​

题干 ​

• 无限下拉列表绑定事件

• 事件委托

题解 ​

使用事件委托，事件委托是一种利用事件冒泡（Event Bubbling）机制，将子元素的事件处理函数委托给父元素的方法。事件冒泡是指当一个元素触发了某个事件时，这个事件会沿着 DOM 树向上冒泡，直到根元素或者被阻止为止。

• 选择一个包含所有需要绑定事件的子元素的父元素，例如一个 div 或者 ul 等。
• 使用 addEventListener 给父元素绑定一个事件处理函数，例如 click 或 mouseover 等。
• 使用 event.target 属性获取触发事件的源头元素，也就是用户实际点击或者悬停的子元素，并判断是否是需要绑定事件的子元素。
• 如果触发源是需要绑定事件的子元素，就执行相应的操作，例如显示图片详情或者放大图片等。

使用事件委托的好处是：

• 减少内存占用：只需要给父元素绑定一个事件处理函数，而不需要给每个子元素都绑定一个事件处理函数，从而节省内存空间。
• 提高性能：只需要在父元素上进行一次事件监听，而不需要在每个子元素上都进行事件监听，从而减少事件注册和解绑的开销。
• 动态适应：当有新的子元素添加或者删除时，不需要重新绑定或者解绑事件处理函数，父元素的事件处理函数可以自动适应子元素的变化。

相关 ​

什么是事件代理（事件委托），使用场景

贡献者 ​

isboyjc