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

Posted 2021-02-15 木石天涯

我们设定一种场景，如下代码，一个

中包含了若干个，而且还能继续增加。那如何快捷方便的为所有的绑定事件呢？

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button>点击增加一个 a 标签</button>

这里就会用到事件代理，我们要监听的事件，但要把具体的事件绑定到

上，然后看事件的触发点，是不是

var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
    var target = e.target
    if (e.nodeName === 'a') {
        alert(target.innerhtml)
    }
})

那我们现在完善一下之前写过的通用事件绑定函数，加上事件代理

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function (e) {
        var target
        if (selector) {
            target = e.target
            if (target.matches(selector)) {
                fn.call(target, e)
            }
        } else {
            fn(e)
        }
    })
}

然后这样使用

// 使用代理
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function (e) {
    console.log(this.innerHTML)
})

// 不适用代理
var a = document.getElementById('a1')
bindEvent(div1, 'click', function (e) {
    console.log(a.innerHTML)
})

最后，使用代理的优点

• 使代码简洁
• 减少浏览器的内存占用

以上是关于对于一个无线下拉加载图片的页面，如何给每个图片绑定事件的主要内容，如果未能解决你的问题，请参考以下文章

懒加载js实现和优化

QT 做图片缩略显示 滚动条下拉 怎么实现动态加载下面的图片？

js学习总结----延迟加载思想和首屏延迟加载

如何优化图片加载慢

对于富文本编辑器中使用lazyload图片懒加载

小程序下拉加载闪烁 跳动