Hexo

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

绑定事件的两种方式/DOM事件的级别

我们在上一篇文章 DOM操作详解中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。

DOM0的写法：onclick

1
2
3

element.onclick = function () {

}

举例：

<body>
<button>点我</button>
<script>
    var btn = document.getElementsByTagName("button")[0];

    //这种事件绑定的方法容易被层叠。
    btn.onclick = function () {
        console.log("事件1");
    }

    btn.onclick = function () {
        console.log("事件2");
    }

</script>
</body>

点击按钮后，上方代码的打印结果：

事件2

我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。

DOM2的写法：addEventListener

1
2
3

element.addEventListener('click', function () {

}, false);

参数解释：

参数1：事件名(注意，没有on)
参数2：事件名(执行函数)
参数3：true表示捕获阶段触发，false表示冒泡阶段触发（默认）。如果不写，则默认为false。【重要】

举例：