1、js事件简介
事件(Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应
2、主要作用
| 1）、验证用户输入窗体的数据 2）、增加页面的动感效果 |
3、事件名称与事件处理程序(事件侦听器)
事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发生了怎么办？
| 事件源 | 事件名 | 监听 | 处理 |
| 车 | 闯红灯 | 摄像头、交警 | 扣分罚款 |
| 按钮 | 点击 | 窗口 | 执行函数 |
如我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、 mousemove、 load
| <body onload="loadWindow();"></body> <script> function loadWindow() { alert("加载窗体"); } </script> |
4、处理事件的方式
1）、行内事件（耦合度高）
| <span id="main" onclick="test();">点我</span> <script type="text/javascript"> // 此处 click，点击，是一种事件的名称，onclick 就叫做事件处理程序。 //下面这段代码，我们通过处理程序(onclick)为 main 这个元素预定了点击(click)， //这样在点击(click)发生的时候，执行函数中的代码(弹出一个对话框)。 function test() { alert('别点我。。。 '); } </script> |
2）、DOM 0级事件（解耦）
| <span id="main" onclick="test();">点我</span> <script> //dom 事件级处理 var obj = document.getElementById("main"); obj.onclick = function() { alert('点击了此处哦！'); } obj.onclick = function() { alert('点击了此处哦 2！'); } </script> |
3）、DOM2级事件（可为同一个元素绑定多个同类型事件）
| <span id="main" onclick="test();">点我</span> //dom02 事件级处理：绑定 3 个事件 <script> var obj = document.getElementById("main"); obj.addEventListener("click", test, false); function test() { alert(this.innerHTML); } obj.addEventListener("click", function() { alert("第二个事件"); }, false); </script> |
以上是我们对js中事件的处理方式，下节我们将结合具体的事件演示效果。
更多有关Javascript大厦的技术文章请查看：JavaScript工作体系中不可或缺的函数、JS之location详解、JavaScript大厦之JS运算符、JavaScript工作原理：内存管理 + 如何处理4个常见的内存泄露、JavaScript 和 Web 开发都应该知道的10个概念、等等