JavaScript学习11：事件入门

标签：事件   javascript   

         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页面增添动态效果，如何让这两者进行交互，那就是我们正在看的事件了，当然这些都是事件的基础性概念，关于事件对象和事件绑定的东西，我们下回分解。

JavaScript学习11：事件入门

标签：事件   javascript   

原文地址：http://blog.csdn.net/lianjiangwei/article/details/46692317