[快速入门前端 65] JavaScript：事件 (1) 事件和绑定方法

事件 Event

事件(event) 是指在网页上的动作或者发生的事情，可以是浏览器的行爲，例如页面加载完成，也可以是用户的行为，例如点选按钮、页籤等动作。当网页需要对某事件发生做出相应的事情时，例如点选按钮跳出视窗，就需要将事件绑定显示视窗的 function。

绑定的方法

当我们需要在指定事件发生后做某些事时，需要「绑定事件」，白话一点来说就是让程式知道发生这件事后要执行哪段程式码或哪个函式 (function)。而将事件绑定的方法主要有三种，分别为在 HTML 中直接写 JS、on-event 绑定、及事件监听。

HTML 属性中写事件
是事件绑定最直接的方式，也就是直接在 HTML 元素中用 inline 方式将事件写成一个属性，并在属性值中写入 JavaScript 程式，例如 <input type="button" onclick="clickButton()">，在这个方法中所有的事件都以 on 开头，例如滑鼠点击事件 click 会写成 onclick=""。

on-event 绑定
on-event 是使用 元素节点.on事件名 = 函式 的方式绑定要执行的 Function，这个方法的概念与上个方法相同，只是将 HTML 和 JavaScript 的语法分离，这样比 inline 的写法更好维护。on-event 的写法有一个缺点，就是我们无法在同个 event 上绑定多个 Function，所以较不适合複杂的情境。

event listener 事件监听
事件监听 ( addEventListener ) 是将一个监听器 (event listener) 绑定在元素上，因为不是使用属性的方式一对一绑定，所以我们可以针对同个事件绑定多个监听器。
addEventListener() 有三个参数，分别是 事件、执行 function，最后则是 Boolean 值， 用来决定事件要在「捕获」或「冒泡」时执行，预设为 false (冒泡)。

1. 在 HTML 属性中写事件

最简单的方式，常见的有 onclick、onchange、onmouseover 等等，用法是直接将事件名称写加 on 在 HTML中，但不太适合功能複杂，或者同时会有多个事件的情境。

範例： 在点选按钮时触发 clickme()

<!-- click button 时执行 function clickme --><button onclick="clickme()">点选</button>

function clickme() {    console.log('被点了');}

2. 在 JS 中用 on-event 绑定

在 JS 中以 DOM.事件 的写法将 Function 绑定到事件中，这个作法相对于上一种较好管理，但缺点是一个事件只能绑定一个函式。

範例：

<button onclick="clickme()" id="button">点选</button>

// 取得 DOM buttonvar button = document.getElementById('button');// 当 button onclick 时执行匿名函式button.onclick = function(e){    console.log('我被点了');};

3. 事件监听

事件监听的写法为 DOM.addEventListener('事件', 要执行的函式, Boolean) ，这个写法解决了 on-event 一个事件只能绑定一个 Function 的问题。事件监听的事件需要加引号，且不需要加 on，例如点击事件在 on-event 写法为 onclick，在监听时就只需要写成 'click'。

範例： 绑定两个 Function

<button id="button">点选</button>

var button = document.getElementById('button');button.addEventListener('click', function(){    console.log('我被点了');});button.addEventListener('click', function() {    console.log('第二个');});

上一篇：[快速入门前端 64] JavaScript：DOM (5) 节点的 CRUD - 修改、删除
下一篇：[快速入门前端 66] JavaScript：事件 (2) Event 和事件解绑
系列文章列表：[快速入门前端] 系列文章索引列表