【11】大厂面试知识总结 - JS-Web-API-事件_无限下拉列表监听每个图片的点击-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32629809/article/details/120210987

题目

编写一个通用的事件监听函数
描述事件冒泡的流程
无限下拉的列表，如何监听每个图片的点击？

知识点

事件绑定

const btn = document.getElementById('btn1')
btn.addEventListener('click', event => {
	console.info('clicked')
})

function bindEvent(elem, type, fn) {
	elem.addEventListener(type, fn)
}

事件冒泡

<body>
	<div id="div1">
		<p id="p1">激活</p>
		<p id="p2">取消</p>
		<p id="p3">取消</p>
		<p id="p4">取消</p>
	</div>
		<div id="div2">
		<p id="p5">取消</p>
		<p id="p6">取消</p>
	</div>
</body>
<script>
	const p1 = document.getElementById('p1')
	const body = document.body
	bindEvent(p1, 'click', event => {
	    event.stopPropagation() // 阻止冒泡
	    console.log('激活')
	})
	
	bindEvent(body, 'click', event => {
	    console.log('取消')
	    // console.log(event.target)
	})
</script>

事件代理
代码简洁
减少浏览器内存占用
但是,不要滥用

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

<script>
	const div3 = document.getElementById("div3")
	bindEvent(div3, 'click', event => {
	    event.preventDefault()
	    const target = event.target
	    if (target.nodeName === 'A') {
	        console.log(target.innerHTML)
	    }
	})
</script>

通用的事件绑定函数

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            // 代理绑定
            if (target.matches(selector)) {
                fn.call(target, event)
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}