JS-Web-API-事件-面试题_target.matches-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34771938/article/details/120881925

本文介绍了JavaScript中的事件绑定，包括简单版通用事件绑定函数和包含事件代理的通用事件绑定函数。事件冒泡是事件从触发元素向上级元素传播的过程，常用于事件代理。事件代理利用事件冒泡机制，通过在祖先元素上绑定事件来处理大量后代元素的事件，从而减少内存开销。文中给出了事件代理的示例代码，展示了如何阻止事件传播并使用事件代理实现点击事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件绑定

简单版通用事件绑定函数：

包含事件代理的通用事件绑定函数：

注：

selector: 是个css选择器字符串。

target.matches(selector) : 如果元素被指定的选择器(selector)字符串选择返回true; 否则返回false。

二、事件冒泡

基于 DOM 树形结构。
事件会顺着触发元素向上冒泡。
应用场景：代理。

示例：

e.stopPropagation() 的作用是阻止事件传播。

三、事件代理

事件代理又叫事件委托，原理是利用事件冒泡机制，将后代元素事件委托给祖先元素。
当有大量类似元素需要批量添加事件监听时，使用事件委托可以减少内存开销。

示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件代理</title>
</head>

<body>
    <div id="div3">
        <a href="#">a1</a><br>
        <a href="#">a2</a><br>
        <a href="#">a3</a><br>
        <a href="#">a4</a><br>
        <button>加载更多...</button>
    </div>
    <script>
        // 通用事件绑定函数
        function bindEvent(elem, type, selector, fn) {
            // 处理只传3个参数的情况
            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)
                }
            })
        }

        // 代理绑定
        const div3 = document.getElementById('div3')
        bindEvent(div3, 'click', 'a', function (event) {
            event.preventDefault() // 阻止默认行为
            alert(this.innerHTML)
        })
    </script>
</body>

</html>