维基百科对它的解释是：事件驱动程序设计(英语：Event-driven programming)是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作(如鼠标的按键，键盘的按键动作)或者是由其他程序的消息来决定的。相对于批处理程序设计(batch programming)而言，程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序(Interactive program)的情况下孕育而生的。
简页言之，在 web 前端编程里面 JavaScript 通过浏览器提供的事件模型 API 和用户交互，接收用户的输入
由于用户的行为是不确定的，也就是说不知道用户什么时候发生点击、滚动这些动作。这种场景是传统的同步编程模型没法解决的，因为你不可能等用户操作完了才执行后面的代码
比如我们在 Python 里面调用接收用户输入的方法 raw_input() 后终端就会一直等待用户的输入，直到输入完成才会执行后面的代码逻辑。但是在下面这段 NodeJS 代码中，接收用户输入的方法 process.stdin.read 是在一个事件中调用的。后面的代码不会被阻塞(blocked)。
事件驱动程序模型基本的实现原理基本上都是使用 事件循环(Event Loop)，这部分内容涉及浏览器事件模型、回调原理，有兴趣的去看链接里面的视频学习下
需要说明的是在客户端 JavaScript 中像 setTimeout, XMLHTTPRequest 这类 API 并不是 JavaScript 语言本身就有的。而是 JavaScript 的宿主环境(在客户端 JavaScript 中就是浏览器)，同样像 DOM、BOM、Event API 都是浏览器提供的
事件绑定的方法
DOM 元素行内绑定
直接在 DOM 元素上通过设置 on + eventType 来绑定事件处理程序
这种绑定方法是最原始的，有两个缺点：
1 事件处理程序和 HTML 结构混杂在一起
早期在结构、样式、表现分离的时代很忌讳这一点。现在看来在很多 MVX 框架中将事件绑定和 DOM 结构放在一起处理，这样似乎更方便维护(不用来回切换 HTML,JavaScript 文件)，而且也符合可预见(predictable)性的规则
2 命名空间冲突
因为 onclick 中的 JavaScript 代码片段执行环境是全局作用域。然而在 JavaScript 语言中并没有相关的命名空间特性。所以就很容易造成命名空间的冲突，非要用这种方法绑定事件的话只能用对象来做一些封装。
现代/标准的绑定方法
标准的绑定方法有两种，addEventListener 和 attachEvent 前者是标准浏览器支持的 API，后者是 IE 8 以下浏览器支持的 API。通常需要我们做个兼容封装：
<script>
function addEvent(target, type, handler) {
if (target.addEventListener) {
target.addEventListener(type, handler, false);
} else {
target.attachEvent('on' + type, handler)
}
}
addEvent(document, 'click', function() { alert(this === document) });
addEvent(document, 'click', function() { alert(this === document) });
</script>
上面的例子在 IE 8 以下和标准浏览器的效果是不一样的，问题就在于 addEventListener中的事件回调函数中的 this 指向元素(target)本身，而 attachEvent 则指向 window 为了修复这个问题上面的 attachEvent 可以做一点小调整让其保持和 addEventListener 的效果一样，不过这样的话注册的 handler 就是个匿名函数，无法移除!