JavaScript 事件JavaScript 与 HTML 之间的交互是通过事件实现的。可以使用侦听器或处理程序来监听

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

摘要

JavaScript 与 HTML 之间的交互是通过事件实现的。可以使用侦听器或处理程序来监听事件，以便事件发生时执行相应的代码。

通用事件绑定函数

/**
 * elem：元素
 * type：事件的类型，如 click，keyup
 * fn：事件监听的回调函数
 */
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

// 用法
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', event => {
    event.preventDefault() // 阻止默认事件行为
    event.stopPropagation() // 阻止元素冒泡或捕获事件
    alert('clicked')
})

事件流

事件流是从页面中接收事件的顺序。IE的事件流是事件冒泡流，Netscape Communicator 的事件流是事件捕获流

事件冒泡（event bubbling）：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    function bindEvent(elem, type, fn) {
        elem.addEventListener(type, fn)
    }
    window.onload = function() {
        const div1 = document.getElementById('root')
        const bodyElem = document.getElementsByTagName('body')[0]
        const htmlElem = document.getElementsByTagName('html')[0]
        bindEvent(div1, 'click', function() {
            console.log('div1 clicked')
        })
        bindEvent(bodyElem, 'click', function() {
            console.log('body clicked')
        })
        bindEvent(htmlElem, 'click', function() {
            console.log('html clicked')
        })
    }
</script>
</html>

点击页面中 id 为 root 的 <div> 元素，事件的传播顺序：div > body > html > document，即是点击元素时，事件沿 DOM 树向上传播，直至传播到 document 对象

事件捕获（event capturing）：事件由不太具体的节点接收到事件，然后逐级向最具体的节点接收到事件。用意在于事件到达预定目标之前捕获它

示例

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

在原有的 bindEvent 函数追加第三个参数 true，改变监听事件触发的时机，由冒泡触发改为捕获触发。

参考

addEventListener