MooTools教程(5):事件处理

【 tulaoshi.com - Web开发 】

今天我们开始第五讲，在上一讲（）中，我们学习了在MooTools 1.2中建立和使用函数的几种不同方式。下一步就是理解事件了。和选择器类似，事件也是建立互动界面的一个重要部分。一旦你掌握了一个元素，你需要去决定什么行为来触发什么效果。先把效果留着以后在讲，我们首先看一看中间步骤和一些常见的事件。

左键单击事件

左键单击事件是web开发中最常见的事件。超链接识别点击事件，然后把你带到另外一个URL地址。MooTools能够识别其他DOM元素上的点击事件，在设计和功能上给了你极大的灵活性。给一个元素添加一个点击事件的第一步：

参考代码： $().addEvent(, (){          alert(); });

你也可以把这个函数从.addEvent();独立出来来完成相同的事情：

参考代码：   clickFunction = (){          alert(); }   window.addEvent(, () {     $().addEvent(, clickFunction); }); 参考代码：  body     div id= ! --  element now recognizes the click event --     /div /body

注意：和超链接识别点击事件一样，MooTools的点击事件实际上也是识别mouse up，意味着当你鼠标松开是发生，而不是鼠标按下去的时候发生。这就给了用户一个机会去改变他们的主意只要在松开之前把鼠标的指针从点击的元素上移开就可以了。

鼠标进入和离开事件

当鼠标停留在一个链接元素上时，超级链接还识别hover事件。通过MooTools，你可以给其他的DOM元素也添加一个悬停事件。通过把这个事件分为鼠标进入和鼠标离开事件，你可以更加灵活地根据用户的行为来操控DOM。

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）

和以前一样，我们要做的第一件事就是把一个事件附加到一个元素：

参考代码：   mouseEnterFunction = (){          alert(); }   window.addEvent(, () {     $().addEvent(, mouseEnterFunction); });

鼠标离开事件也是同样的，这个事件在鼠标指针离开一个元素时发生。

参考代码：   mouseLeaveFunction = (){          alert(); }   window.addEvent(, () {    $().addEvent(, mouseLeaveFunction); }); 删除一个事件

总有一些时候，你一旦不再需要那些事件，于是你需要从一个元素上删除一个事件。删除一个事件和添加一个事件一样容易，甚至连结构都是类似的。

参考代码：  $().removeEvent(, mouseLeaveFunction); textarea或者input中的按键事件

MooTools也可以让你识别文本域（textarea）和文本框（input）中的按键事件。其语法和我们上面看到的类似：

参考代码：    = keydownEventFunction () {     alert(); };   window.addEvent(, () {     $().addEvent(, keydownEventFunction); });

上面的代码将会识别任何按键。要针对一个特定的按键，我们需要添加一个参数，然后使用一个if语句：

参考代码：    keyStrokeEvent = (event){                (event.key == ) {       alert()      }; }   window.addEvent(, () {     $().addEvent(, keyStrokeEvent); });

如果需要其他的控制，比如shift键和control见，语法略有一点不同：

参考代码：   keyStrokeEvent = (event){                (event.shift) {      alert()      }; }   window.addEvent(, () {     $().addEvent(, keyStrokeEvent); }); 参考代码：  div id=     input id= type= / /div 示例

这里是上面我们写过的一些可以执行的代码：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）

注意：你可以在单击示例上面试一下，不过不是在上面松开鼠标，而是把鼠标一直按着从区块上离开，然后再松开。注意一下它没有触发点击事件。

参考代码：   keyStrokeEvent = (event){                (event.key == ) {          alert()       }; }    mouseLeaveFunction = (){          alert(); }    mouseEnterFunction = (){          alert(); }    clickFunction = (){          alert(); }   window.addEvent(, () {     $().addEvent(, clickFunction);     $().addEvent(, mouseEnterFunction);     $().addEvent(, mouseLeaveFunction);     $().addEvent(, keyStrokeEvent); }); 参考代码：  div id= class=左键单击（Click）/divbr / div id= class=鼠标进入（Mouse Enter）/divbr / div id= class=鼠标离开（Mouse Leave）/divbr / input id= type= value= /

左键单击（Click）
鼠标进入（Mouse Enter）
鼠标离开（Mouse Leave）

 

更多学习

包含MooTools 1.2核心库、一个外部JavaScript文件、一个简单的html页面和一个css文件。

更多关于事件的资料

MooTools给了你更多的关于事件的控制方法，比我们这里讲得要多得多。要学习更多内容，请查看下面几个链接：

MooTools文档中的 MooTools文档中的 还有，阅读一下w3school网站上