JS DOM编程复习笔记 - 三种事件绑定方式（十三）

今天我们将学习在JavaScript 中的三种绑定事件的方法。这在面试中也是一道必考题目。

目录

• 行内绑定
• DOM 0级事件绑定
• DOM 2级事件绑定

1）行内绑定事件

行内事件名称通常是以on开头，比如点击事件为onclick，要将事件处理程序和元素关联，我们在元素上增加对应的事件属性，比如：

<button onclick="alert('点击我!')">保存</button>

当然事件处理程序可以调用已定义的函数。 例如：

<script>
  function showAlert() {
     
     
    alert('点击我!')
  }
</script>
<button onclick="showAlert()">保存</button>

要点

以下是HTML属性绑定事件的一些要点：

首先，事件处理程序中的代码无需显式定义事件对象：

<button onclick="alert(event.type)">保存</button>

其次，事件处理程序中的 this 值相当于事件的目标元素：

<button value="我是value值" onclick="alert(this.value)">保存</button>

第三，事件处理程序可以访问元素的属性，例如：

<button