给对象绑定一个事件，事件发生的时候去执行指定的函数，这就是 addEventListener() 这个方法的作用。 从这个方法从字面上就大概知道它是做什么的 … add 是添加，event 是事件 … listener 是监听器 … 加到一起就是添加事件的监听器 … 也就是去为指定的目标添加一个可以监听指定事件的东西 …

使用 addEventListener() 的方法就是，让想要绑定事件的对象调用 addEventListener() 这个方法 … 这个方法里面包含三个参数 …

第一个参数是一个字符串，也就是事件的类型，也可以说是事件的名称 …

第二个参数是，事件发生以后要调用的函数 … 在这个函数里，我们可以去定义事件发生以后要做的一些事儿 …

第三个参数是事件的捕获，这是参数的类型是布尔值，默认是 false … 也就是不使用事件捕获，以后面的视频里我们再去介绍一下这个参数的意思 …

测试

先注释掉前面添加的这些事件处理程序 ..

要添加的事件监听器的目标是 btn .. 后面加上一个点，再加上 addEventListener … 在它的第一个参数里，指定为 btn 绑定的事件 …

先试一下点击事件 … 点击这个事件的名称是 click … 一般去掉事件处理程序前面的 on 就是这个事件的名称 …

用逗号分隔一下 … 第二个参数是发生这个事件的时候，要调用的函数 … 输入 showMessage … 在后面我们可以定义这个函数要做的事儿 … 第三个参数我们设置为 false …

btn.addEventListener('click', showMessage, false);

这样点击 btn ，也就是这个链接按钮的时候，会触发 click 事件 … 这样就会调用 showMessage 这个函数 …

下面我们再去定义 showMessage 这个函数 …

function showMessage () {
console.log('被点击了！');
}

这个函数要做的就是在控制台上输出 被点击了 这几个字儿 … 保存一下 … 回到浏览器 …

点一下这个链接按钮 …

浏览器会在这个按钮上触发 click 事件 … 因为我们绑定了这个事件在这个按钮上 … 所以会去执行指定的 showMessage 函数 … 在控制台上，显示 被点击了 ….

事件对象

事件发生的时候，会返回一个事件对象，这个对象里面会包含一些很有用的信息 … 事件发生时间，目标 … 事件的类型等等 …

把这个对象传递给处理事件的 函数 … 在这个函数里，我们就可以使用事件对象里的内容了 …

（#js）

在这个 showMessage 函数里，设置一个参数 … 这里我们用 event 这个名字来代表事件对象 … 有时候，你也经常会看到用 evt ，或者一个字母 e 来表示这个对象 …

再把这个对象的内容输出到控制台上看一下 …

console.log(event);

保存 … 回到浏览器 … 点击 按钮 …. 在控制台会输出事件返回的这个对象 …

打开这个对象 …. 这里面的这些属性在函数里都可以使用 .. 比如我们使用这个 type 属性 … 事件的类型 …

我们可以给这个按钮绑定多个事件 … 事件发生的时候，去调用同一个函数 … 在这个函数里，可以用到这个事件对象的类型这个属性去判断一下 … 再去决定要做的具体的事 …