JavaScript事件概念详解(区分静态注册和动态注册)

什么是JavaScript事件？

JavaScript事件是指在DOM元素上进行的用户操作或者其他程序事件（比如页面加载完成）。

事件的触发和响应

当一个事件被触发时，浏览器首先会寻找和这个事件相关联的DOM元素，然后执行用户定义的JavaScript代码，来响应这个事件。事件可以触发多次，JavaScript代码将会在每次触发事件时执行。

事件的类型

事件分为很多类型，比如鼠标事件、键盘事件、页面加载完成事件等等。这里我们以鼠标事件为例进行详细介绍。

鼠标事件

鼠标事件分为click(点击)、mouseover(鼠标悬停)、mouseout(鼠标移开)、mousedown(鼠标按下)、mouseup(鼠标释放)等类型。

示例1：点击事件的静态注册

HTML代码：

<button id="myButton">点击我</button>

JavaScript代码：

const btn = document.getElementById('myButton')
btn.addEventListener('click', function() {
    alert('你点击了按钮！');
})

在上面的示例中，我们使用了addEventListener方法对按钮进行了静态注册。这意味着我们在代码中明确注册了一个事件监听器，当按钮被点击时就会执行alert函数来提示用户。

示例2：鼠标悬停事件的动态注册

HTML代码：

<div id="myDiv">悬停我</div>

JavaScript代码：

const div = document.getElementById('myDiv')
div.onmouseover = function() {
    this.style.backgroundColor = 'yellow'
}
div.onmouseout = function() {
    this.style.backgroundColor = ''
}

在上面的示例中，我们使用了onmouseover和onmouseout事件属性对div元素进行了动态注册。这意味着我们在代码中没有明确的注册一个事件监听器，而是直接使用了元素的属性来指定事件处理函数。当鼠标悬停在div元素上时，会改变其背景颜色为黄色；当鼠标移开时，背景颜色重新变为默认值。

静态注册和动态注册

在JavaScript中，我们可以使用addEventListener方法来进行静态注册，也可以使用onxxx事件属性进行动态注册。

静态注册

静态注册方法是通过addEventListener方法注册事件监听器。它可以让我们在事件发生之前就准备好监听器，同时我们也可以在任何时候方便地删除监听器。

语法：element.addEventListener(event, function, useCapture);

其中，event表示事件类型（比如click，mouseover）；function表示事件处理函数；useCapture表示是否在捕获阶段执行（默认为false）。

动态注册

动态注册方法是通过在元素上挂载onxxx事件属性来注册事件监听器。这种方式是一种快捷的方法，并且非常适合于临时添加事件监听器。

语法：element.onxxx = function;

其中，xxx表示事件类型（比如mouseover，keyup）。

总结

JavaScript事件是异步触发的程序，当事件完成时，它将调用与该事件相关联的特定JavaScript代码。我们可以使用静态注册和动态注册两种方式注册事件监听器。在实际开发中，我们应该根据需要选择合适的方式来注册事件监听器。