老大哥在看着你 - 事件与事件监听

在JS的世界里到处是物件，在浏览器的世界里到处是事件。

事件驱动

根据JavaScript大全，客户端JavaScript程序是使用非同步的事件驱动程序设计模型。
这种模型最大的特色是程序执行的流程是根据使用者的行为而定，这些行为可能是在键盘输入一串文字或是用滑鼠点击了页面某个元素，这些行为发生的当下就会产生一个事件。

而前端开发者要做的事就是针对关心的事件预先设计好相对应的流程。

题外话：除了事件驱动设计模型，维基百科还提到了其他两种设计模型：

1. 批次程序设计：程序执行的流程是由程序设计师来决定
2. 资料驱动程序设计：程序语句描述要匹配的资料，和对它需要做的处理，程序本身不定义选取资料的一序列档案操作步骤

常见事件类型

老大哥监听的事件类型包山包海，以下先条列常使用到的类型就好：

滑鼠事件

• click: 滑鼠点击元素
• mouseover: 滑鼠经过元素
• mouseout: 滑鼠离开元素

键盘事件

• keydown: 使用者按下某个键盘按键
• keyup: 使用者放开某个键盘按键

表单事件

• submit: 使用者提交表单
• focus: 使用者点击某个输入框

事件监听方式

成为老大哥的第一步就是学会装监听器，主要有下面两种方法：
说明书上说，第二种方法比较新，推荐要成为监听强者的大哥们使用

假设我们要做出一个惊奇按钮，在使用者点击後，按钮的文字和颜色会改变，来看看两者的写法差异和优缺点

• on-event： on 之後接着事件名称，例如：onclick, onmouseover, onload等等，必须全小写

const button = document.querySelector('button')

function changeContent() {button.textContent = 'Hey You';}
function changeColor() {button.style.backgroundColor = '#dd1104';}

button.onclick = changeContent;
button.onclick = changeColor;

实验结果发现，当有一个以上的处理器，後者会覆写之前注册的处理器，在这个例子中，按下按钮後只会改变颜色，但按钮中的文字不会改变。

这是因为这个方式当初在设计时，开发者认为事件目标最多只会有一个处理器。所以如果我们对於一个事件需要多个处理器时，就必须用下面的语法

• addEventListener():

先来看看语法规则，addEventListener的括号中接受三个引数，依序是：

1. 注册处理器的事件类型，必须是一个字串
2. 事件发生时要触发的函式
3. 布林值或物件

const button = document.querySelector('button')

function changeContent() {button.textContent = 'Hey You';}
function changeColor() {button.style.backgroundColor = '#dd1104';}

button.addEventListener('click', changeContent);
button.addEventListener('click', changeColor);

成功完成想要的效果～

为了成为让人闻之丧胆的老大哥，一起来好好练习addEventListener()吧！

参考资料：

JavaScript 大全
前端开发思维转变——从事件驱动到资料驱动
资料驱动编程
事件驱动程序设计