JavaScript 事件的绑定

常用的绑定方式有三种：

1. 通过 on 在 DOM 元素中直接绑定

<button onclick="fn()">按钮</button>
<script>
function fn() {
alert('事件响应');
}
</script>

2.在 JavaScript 代码中绑定

<button id="isButton">按钮</button>
<script>
let isButton = document.getElementById('isButton');
isButton.onclick = function () {
alert('事件响应');
}
</script>

以上两种方式不能重复绑定相同事件，且事件前需要加上 on 关键字。

3. 绑定事件监听函数

语法为：元素 .addEventListener( 事件名 , 执行程序 ,true/false)

<button id="isButton">按钮</button>
<script>
let isButton = document.getElementById('isButton');
isButton.addEventListener('click',function() {
alert('事件响应');
})
</script>

此方法可以重复绑定相同的事件，或是绑定多个事件，并且 不需要加 on 前缀。

注意：

参数 3 为可选项，如果为 true 表示事件处理程序以捕捉模式触发；从顶层的父节点开始触发

事件，从外到内传播。简称 事件捕获 。

默认参数是 false ，事件处理程序以冒泡模式触发；从最内层的节点开始触发事件，逐级冒泡

直到顶层节点，从内向外传播。简称 事件冒泡 。