JS绑定事件（静态绑定+动态绑定）

在基本事件模型中，JavaScript 支持以下两种绑定方式。

静态绑定

把 JavaScript 脚本作为属性值，直接赋予给事件属性。

示例

在下面示例中，把 JavaScript 脚本以字符串的形式传递给 onclick 属性，为 <button> 标签绑定 click 事件。当单击按钮时，就会触发 click 事件，执行这行 JavaScript 脚本。

<button onclick="alert('你单击了一次!');">按钮</button>

动态绑定

使用 DOM 对象的事件属性进行赋值。

示例

在下面示例中，使用 document.getElementById() 方法获取 button 元素，然后把一个匿名函数作为值传递给 button 元素的 onclick 属性，实现事件绑定操作。

<button id="btn">按钮</button>
<script>
    var button = document.getElementById("btn");
    button.onclick = function () {
        alert("你点击了一次！");
    }
</script>

可以在脚本中直接为页面元素附加事件，不破坏 HTML 结构，比上一种方式灵活。