开发学院网页设计 JavaScript JavaScript Event学习第一章：Event介绍阅读

JavaScript Event学习第一章：Event介绍

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示： 注册一个事件处理程序第一步是先注册你的事件处理程序，你需要确定的是浏览器会在任何时候都执行你的代码，JavaScript Event学习第一章：Event介绍(5)，这里有四种注册事件处理程序的方法：inline,traditional,w3c和Microsoft，最好使用traditinal

注册一个事件处理程序

第一步是先注册你的事件处理程序。你需要确定的是浏览器会在任何时候都执行你的代码。

这里有四种注册事件处理程序的方法：inline,traditional,w3c和Microsoft。

最好使用traditinal方法，因为他能很好的跨浏览器并且有很大的自由和通用性。注册一个事件处理程序，如下：

element.onclick　=　doSomething; if　(element.captureEvents)　element.captureEvents(Event.CLICK);

现在这个函数doSomething()就注册成为一个HTML的element元素click事件的事件处理程序。这意味着无论什么时候用户点击了这个元素，那么doSomething()都会执行。

访问这个事件

但你注册了你的事件处理程序你就开始写真正的代码了。通常你想访问这个事件本身，所以你可以读取这个事件的信息。

访问这个事件所以你可以读出他的属性，通常你的事件处理程序开始如下：

function　doSomething(e)　{ 　　　　if　(!e)　var　e　=　window.event 　　　　//　e　refers　to　the　event }

现在e就表示在所有浏览器里面的事件，你也可以访问这个事件。

访问这个HTML元素

有时候你希望能够访问到发生事件的元素。这里有两个办法：使用this关键字或者使用target/srcElement属性。

比较保险的访问HTML元素的方法是使用this关键字。this并不总是指向正确的HTML元素，但是和traditional模式一起就能很好的工作。

function　doSomething(e)　{ 　　　　if　(!e)　var　e　=　window.event 　　　　//　e　refers　to　the　event 　　　　//　this　refers　to　the　HTML　element　which　currently　handles　the　event 　　　　//　target/srcElement　refer　to　the　HTML　element　the　event　originally　took　place　on }

target/srcElement属性包含一个最初事件发生的HTML元素的引用。非常有用，但是当事件被捕获或者冒泡了他依然是那个最初发生事件的元素不会改变。

读取属性

在读出一些有趣的事件属性(event properties)这个问题上，是浏览器兼容最不好的部分。学习这个兼容性列表,然后写出你自己的代码来获取你需要的信息。

确定总是使用最仔细的对象检查。首先确定每一个属性是否存在，然后再读取他的值。比如：

function　doSomething(e)　{ 　　　　if　(!e)　var　e　=　window.event 　　　　if　(e.keyCode)　code　=　e.keyCode; 　　　　else　if　(e.which)　code　=　e.which; }

现在code就包括了所按下的键，并且兼容所有的浏览器。

事件顺序

最后，你需要决定你是否希望事件冒泡。如果不希望发生事件冒泡，那么就阻止他：

function　doSomething(e)　{ 　　　　if　(!e)　var　e　=　window.event 　　　　//　handle　event 　　　　e.cancelBubble　=　true; 　　　　if　(e.stopPropagation)　e.stopPropagation(); }

写代码

现在你可以开始写事件处理程序的代码了。通过前面的代码和信息，可以让你知道事件什么时候发生，你的代码应该做怎样的回应。记住：让交互更有逻辑性要么你的用户不会理解发生了什么。

原文在这里http://www.quirksmode.org/js/introevents.html

文章出处：http://beiyu.cnblogs.com

编缉推荐阅读以下文章