在上一节中，学习和了解了DOM事件模型，了解到JavaScript中每种事件模型都有其自己独具的特性。不同的事件模型中，绑定DOM事件的姿势也将略有差异，在这一节中，我们一起来学习JavaScript中DOM事件是如何绑定的。

在JavaScript中，给DOM元素绑定事件主要分为两大类：HTML中直接绑定和JavaScript中绑定。

HTML中直接绑定DOM事件

在HTML中绑定事件叫做内联绑定事件。其使用方式非常的简单，就是在HTML的元素中使用<event>属性来绑定事件，比如onclick这样的on(type)属性，其中type指的就是DOM的事件（比如click），它可以给这个DOM元素绑定一个类型的事件。比如，要为button元素绑定一个click事件，那么就可以像下面这样使用：

<!-- HTML -->
<button onclick="show();">Click Me</button>

<script>
    function show() {
        console.log('Show Me!')
    }
</script>

当用户在按钮上单击鼠标时，onclick中的代码将会运行，在上面的示例中，将会调用show()函数。

这种方式对应的也是DOM Level0 模型中的事件绑定方式。虽然这种方式也能正常的DOM事件绑定方式，但这种方法是非常不鼓励的。因为它是一种非常不灵活的事件绑定方式，它将HTML结构和JavaScript混合在一起。

JavaScript中绑定DOM事件

在JavaScript中绑定DOM事件有两种方法：

• element.on(type) = listener
• element.addEventListener(type, listener, useCapture)

而这两种方法用DOM事件模型来区分，或者划分的话，又被划分为：

• DOM Level1
• DOM Level2

接下来，咱们看看这两个方法的使用。

element.on(type) = listener

这种事件绑定方式和前面介绍的，在HTML中使用onclick=listener绑定DOM事件有点类似，不同的是，前者在HTML中绑定，而这种方式是从HTML中分离出来。咱们将上面的示例改一下，就会像下面这样：

<!-- HTML -->
<button>Click Me!</button>

// JavaScript
function show() {
    console.log("Show Me!");
}

let btn = document.querySelector('button')
btn.onclick = show;

这个时候你用鼠标点击按钮时，同样在控制台中能看到像下图这样的信息：

这里有一个细节需要注意，在onclick调用事件是，应该是show，而不是show()。如果使用的是btn.onclick=show()，那么show()将是函数执行的结果，因此最后一个代码中的onclick就没有定义（函数什么也没有返回）。这样是行不通的。

但我们在HTML中这样调用是可以执行的，前面的示例也向大家演示了。如果你实在想调用show()函数，那么前面的示例，你可以修改成这样：

function show() {
    console.log("Show Me!");
}

let btn = document.querySelector('button')
btn.onclick = function () {
    show()
};

细想一下，其实这和在HTML中内联绑定函数是一样的，同样是给DOM的元素onclick属性赋值一个函数，而他们的区别是：函数中的this指向当前元素（内联），而后面这种方式是在JavaScript中做的。另外一个区别就是内联方式赋值的是一段JavaScript字符串，而这里赋值的是一个函数，它可以接受以一个参数event，这个参数是点击的事件对象。

<!-- HTML -->
<button onclick="show(this)">DOM Level0：Click Me!</button>

<button id="btn">DOM Level1:Click Me!</button>

// JavaScript
function show(e) {
    console.log(e)
}

let btn = document.getElementById('btn')

btn.onclick = show;

比如，上面的示例，你分别点击两个按钮，在控制台上输入的结果将会是像下图这样：

另外，用赋值绑定函数也有一个缺点，那就是它只能绑定一次：

<!-- HTML -->
<button onclick="show(this);show(this);">DOM Level0:Click Me</button>
<button id="btn">DOM Level1:Click Me</button>

// JavaScript
function show(e) {
    console.log(e);
}

let btn = document.getElementById('btn')
btn.onclick = show;
btn.onclick = show;

这个时候点击按钮的结果如下：

这种方法将我们的JavaScript和HTML分开。而且这种方式具有其自己的特征：

• 它的本质就是给HTML元素添加相应的属性
• 它的事件处理程序（绑定的事件）在执行时，其中