JavaScript 事件的概念

事件就是发生在 HTML 元素上的“事情”。例如这个 div 标签被用户点击（click 事件），或者是浏览器已经完成页面加载（load 事件），又或者鼠标移动到某个 HTML 元素上（mouseover 事件）等等，当这些事件触发时，我们要让程序去做一些操作，这些操作被称为事件的响应。

事件的绑定

常用的绑定方式有三种：

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

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

在JavaScript 代码中绑定 

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

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

绑定事件监听函数

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

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

注意：

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

默认参数是 false，事件处理程序以冒泡模式触发；从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播。简称事件冒泡