JavaScript、浏览器、事件之间的关系
JavaScript 程序采用了异步事件驱动编程（Event-driven programming）模型，维基百科对它的解释是：
事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。相对于批处理程序设计（batch programming）而言，程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序（Interactive program）的情况下孕育而生的
简页言之，在 web 前端编程里面 JavaScript 通过浏览器提供的事件模型 API 和用户交互，接收用户的输入
由于用户的行为是不确定的，也就是说不知道用户什么时候发生点击、滚动这些动作。这种场景是传统的同步编程模型没法解决的，因为你不可能等用户操作完了才执行后面的代码
比如我们在 Python 里面调用接收用户输入的方法 raw_input() 后终端就会一直等待用户的输入，直到输入完成才会执行后面的代码逻辑。但是在下面这段 NodeJS 代码中，接收用户输入的方法 process.stdin.read 是在一个事件中调用的。后面的代码不会被阻塞（blocked）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
'use strict'; process.stdin.on('readable', () => { var chunk = process.stdin.read(); if (chunk !== null) { process.stdout.write(`Async output data: ${chunk}`); } }); process.stdin.on('end', () => { process.stdout.write('end'); }); console.log('Will not be blocked'); |
事件驱动程序模型基本的实现原理基本上都是使用 事件循环（Event Loop），这部分内容涉及浏览器事件模型、回调原理，有兴趣的去看链接里面的视频学习下
需要说明的是在客户端 JavaScript 中像 setTimeout, XMLHTTPRequest 这类 API 并不是 JavaScript 语言本身就有的。而是 JavaScript 的宿主环境（在客户端 JavaScript 中就是浏览器），同样像 DOM、BOM、Event API 都是浏览器提供的
事件绑定的方法
DOM 元素行内绑定
直接在 DOM 元素上通过设置 on + eventType 来绑定事件处理程序
|
1 |
<a href="#none" onclick="alert('clicked.')">点击我</a> |
这种绑定方法是最原始的，有两个缺点：
1 事件处理程序和 HTML 结构混杂在一起
早期在结构、样式、表现分离的时代很忌讳这一点。现在看来在很多 MVX 框架中将事件绑定和 DOM 结构放在一起处理，这样似乎更方便维护（不用来回切换 HTML,JavaScript 文件），而且也符合可预见（predictable）性的规则
2 命名空间冲突
因为 onclick 中的 JavaScript 代码片段执行环境是全局作用域。然而在 JavaScript 语言中并没有相关的命名空间特性。所以就很容易造成命名空间的冲突，非要用这种方法绑定事件的话只能用对象来做一些封装
古老的绑定方法
使用 DOM Element 上面的 on + eventType 属性 API
|
1 2 3 4 5 6 |
<a href="#none" id="button">click me</a> <script> var el = getElementById('button'); el.onclick = function() { alert('button clicked.') }; el.onclick = function() { alert('button clicked (Rewrite event handler before).') }; </script> |
这种方法也有一个缺点，因为属性赋值会覆盖原值的。所以无法绑定 多个 事件处理函数，如果我们要注册多个 onload 事件处理程序的话就得自己封装一个方法来防止这种事情发生，下面这个例子可以解决这个问题
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> function addLoadEvent(fn) { var oldonLoad = window.onload; if (typeof oldonLoad !== 'function') { window.onload = fn; } else { window.onload = function() { oldonLoad(); fn(); } } } addLoadEvent(function() { alert('onload 1') }); addLoadEvent(function() { alert('onload 2') }); </script> |
注意这只是个示例，生产环境很少会用到。一般用 DOM Ready 就可以了，因为 JavaScript 的执行通常不用等到页面资源全部加载完，DOM 加载完就可以了
现代/标准的绑定方法
标准的绑定方法有两种，addEventListener 和 attachEvent 前者是标准浏览器支持的 API，后者是 IE 8 以下浏览器支持的 API。通常需要我们做个兼容封装
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function addEvent(target, type, handler) { 简页言之，在 web 前端编程里面 JavaScript 通过浏览器提供的事件模型 API 和用户交互，接收用户的输入 由于用户的行为是不确定的，也就是说不知道用户什么时候发生点击、滚动这些动作。这种场景是传统的同步编程模型没法解决的，因为你不可能等用户操作完了才执行后面的代码 比如我们在 Python 里面调用接收用户输入的方法
事件驱动程序模型基本的实现原理基本上都是使用 事件循环（Event Loop），这部分内容涉及浏览器事件模型、回调原理，有兴趣的去看链接里面的视频学习下 需要说明的是在客户端 JavaScript 中像 setTimeout, XMLHTTPRequest 这类 API 并不是 JavaScript 语言本身就有的。而是 JavaScript 的宿主环境（在客户端 JavaScript 中就是浏览器），同样像 DOM、BOM、Event API 都是浏览器提供的 事件绑定的方法DOM 元素行内绑定直接在 DOM 元素上通过设置
这种绑定方法是最原始的，有两个缺点： 1 事件处理程序和 HTML 结构混杂在一起 早期在结构、样式、表现分离的时代很忌讳这一点。现在看来在很多 MVX 框架中将事件绑定和 DOM 结构放在一起处理，这样似乎更方便维护（不用来回切换 HTML,JavaScript 文件），而且也符合可预见（predictable）性的规则 2 命名空间冲突 因为 古老的绑定方法使用 DOM Element 上面的
这种方法也有一个缺点，因为属性赋值会覆盖原值的。所以无法绑定 多个 事件处理函数，如果我们要注册多个 onload 事件处理程序的话就得自己封装一个方法来防止这种事情发生，下面这个例子可以解决这个问题
注意这只是个示例，生产环境很少会用到。一般用 DOM Ready 就可以了，因为 JavaScript 的执行通常不用等到页面资源全部加载完，DOM 加载完就可以了 现代/标准的绑定方法标准的绑定方法有两种，
|
