JavaScript事件处理的方式(三种)

JavaScript事件处理的方式，一般可以分为三种，分别是通过HTML属性、DOM 0级事件处理和DOM 2级事件处理。下面将一一详细讲解。

1. HTML属性方式

使用HTML标签的事件属性来绑定事件，比如<button onclick="alert('clicked')">Click me</button>。

HTML属性事件处理方式虽然简单，但是显得不够优雅。主要问题有：

• JS代码与HTML代码混在一起，难以维护。
• 不支持事件捕获。

2. DOM 0级事件处理

DOM 0 级事件处理是指在DOM对象上直接定义事件处理程序（事件监听器）。可以通过element.事件名 = function() {} 的方式定义事件处理程序。

示例：

<button id="btn">Click me</button>
<script>
    var btn = document.querySelector('#btn');
    btn.onclick = function() {
        alert('clicked');
    }
</script>

DOM 0级事件处理方式相对于HTML属性法，可以将JS代码与HTML代码分离，但是存在的问题依旧是：不支持事件捕获。

3. DOM 2级事件处理

DOM 2级事件处理方式是目前使用最广泛的事件处理方式，基于事件冒泡的传播机制，支持事件捕获和事件冒泡。使用DOM 2级事件处理程序需要掌握Event对象和EventListener接口。

示例：

<button id="btn">Click me</button>
<script>
    var btn = document.querySelector('#btn');
    btn.addEventListener('click', function(event) {
        alert('clicked');
    })
</script>

上面的代码中，addEventListener方法接收两个参数，第一个参数是事件类型，第二个参数是事件处理程序（名字随意）。事件处理程序可以是匿名函数，也可以是具名函数。

使用DOM 2级事件处理程序的优点在于：

• 支持事件捕获和冒泡。
• 可以为同一元素添加多个事件处理程序，不会覆盖已有的事件处理程序。

综上所述，三种JavaScript事件处理方式都有各自的优缺点，应根据实际需求进行选择。