首页 > 编程笔记 > JavaScript笔记 阅读:1,397

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 结构,比上一种方式灵活。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章