JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击鼠标，敲击键盘了等等。当用户执行类似操作的时候，再去触发执行一系列代码作为用户操作的响应，这就是所谓的事件了吧。
事件一般是用于浏览器和用户操作进行交互，通常我们将JavaScript中的事件模型分为三种：内联模型、脚本模型和DOM2模型。
内联模型
是最传统的接单的一种处理事件的方法。在这个模型中，事件处理函数是HTML标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但是它是和html混写的，并没有与html分离。下面看一个内联模型的示例：
<span style="font-size:18px;"><inputtype="button" value="按钮"onclick="alert('Lianjiangwei');" /></span>
脚本模型
由于内联模型违反了HTML与JavaScript代码层次分离的原则，为了解决这个问题，我们尝试在JavaScript中进行事件处理，这样就产生了脚本模型。示例如下：
<span style="font-size:18px;"> var input=document.getElementsByTagName('input')[0]; //得到input对象
input.onclick=function(){ //匿名函数执行
alert('lianjianwei');
};</span>
DOM2模型
在所有的现代浏览器当中——除了IE9之前的版本，都实现了DOM2标准事件模型，这个事件模型规定：每一个DOM元素所触发的事件都要经历三个阶段：一、捕获阶段；二、目标对象本身的事件处理程序调用阶段；三、冒泡阶段。
冒泡阶段：当文档元素上发生某个类型的事件时，他们会在文档树上向上传播，即调用父元素的相同类型的事件处理函数。
捕获阶段：捕获阶段好像是反向的冒泡阶段。最先调用window对象的捕获处理程序，然后是document对象的捕获处理程序，接着是body对象的，再然后是Dom树向下，以此类推，直到调用事件目标元素的父元素的捕获事件处理程序。在目标元素对象本身上注册捕获事件处理程序不会被调用。
事件处理函数
JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。
对于每一个事件而言，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理将失效。
对于鼠标事件而言，页面所有的元素都可触发
键盘事件则是当用户按下键盘上按键时会触发，分为keydown、keypress和keyup。
而HTML事件则是当页面或者页面上的标签元素发生变化时，触发相应的事件，比如：load事件，当页面完全加载后在window上触发或者当框架集加载完毕后在框架集上触发。类似的还有unload、select、change等等。
看几个简单的代码示例如下：
<span style="font-size:18px;">//事件处理函数举例
//1 鼠标事件
input.onmousedown=function(){
alert('你按下鼠标没放！');
}
//2 键盘事件
onkeydown=function(){
alert('你动键盘了！');
}
//3 HTML事件
window,onscroll=function(){
alert('你正在动滚动条！');
}</span>
小结一下：HTML是Web页面的静态描述，而JavaScript是为Web页面增添动态效果，如何让这两者进行交互，那就是我们正在看的事件了，当然这些都是事件的基础性概念，关于事件对象和事件绑定的东西，我们下回分解。
版权声明：本文为博主原创文章，未经博主允许不得转载。