MooTools教程(5):事件处理

原创

wx634e1c97257c6 2022-11-27 09:04:20 ©著作权

文章标签 Mootools UP 点击事件按键事件单击事件 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者wx634e1c97257c6的原创作品，请联系作者获取转载授权，否则将追究法律责任

今天我们开始第五讲，在上一讲（《Mootools 1.2教程(4)——函数》）中，我们学习了在MooTools 1.2中建立和使用函数的几种不同方式。下一步就是理解事件了。和选择器类似，事件也是建立互动界面的一个重要部分。一旦你掌握了一个元素，你需要去决定什么行为来触发什么效果。先把效果留着以后在讲，我们首先看一看中间步骤和一些常见的事件。
左键单击事件
左键单击事件是web开发中最常见的事件。超链接识别点击事件，然后把你带到另外一个URL地址。MooTools能够识别其他DOM元素上的点击事件，在设计和功能上给了你极大的灵活性。给一个元素添加一个点击事件的第一步：

// 通过$('id_name') 取得一个元素 // 用.addEvent添加事件 // ('click')定义了事件的类型 $('id_name').addEvent('click', function(){ // 在这里添加点击事件发生时你要执行的任何代码 alert('this element now recognizes the click event'); });

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

var clickFunction = function(){ // 在这里添加事件发生时你要执行的任何代码 alert('this element now recognizes the click event'); } window.addEvent('domready', function() { $('id_name').addEvent('click', clickFunction); });

注意：和超链接识别点击事件一样，MooTools的点击事件实际上也是识别“mouse up”，意味着当你鼠标松开是发生，而不是鼠标按下去的时候发生。这就给了用户一个机会去改变他们的主意——只要在松开之前把鼠标的指针从点击的元素上移开就可以了。
鼠标进入和离开事件
当鼠标停留在一个链接元素上时，超级链接还识别“hover”事件。通过MooTools，你可以给其他的DOM元素也添加一个悬停事件。通过把这个事件分为鼠标进入和鼠标离开事件，你可以更加灵活地根据用户的行为来操控DOM。
和以前一样，我们要做的第一件事就是把一个事件附加到一个元素：

var mouseEnterFunction = function(){ // 在这里添加事件发生时你要执行的任何代码 alert('this element now recognizes the mouse enter event'); } window.addEvent('domready', function() { $('id_name').addEvent('mouseenter', mouseEnterFunction); });

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

var mouseLeaveFunction = function(){ // 在这里添加事件发生时你要执行的任何代码 alert('this element now recognizes the mouse leave event'); } window.addEvent('domready', function() { $('id_name').addEvent('mouseleave', mouseLeaveFunction); });

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

// 和前一个示例一样 // 只不过把.addEvent换成了.removeEvent $('id_name').removeEvent('mouseleave', mouseLeaveFunction); textarea或者input中的按键事件 MooTools也可以让你识别文本域（textarea）和文本框（input）中的按键事件。其语法和我们上面看到的类似： var function = keydownEventFunction () { alert('This textarea can now recognize keystroke events'); }; window.addEvent('domready', function() { $('myTextarea').addEvent('keydown', keydownEventFunction); });

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

// 注意函数括号中的“event”参数 var keyStrokeEvent = function(event){ // 下面的代码是说： // 如果按下的键为“k”，则做下面的事 if (event.key == "k") { alert("This tutorial has been brought you by the letter k.") }; } window.addEvent('domready', function() { $('myInput').addEvent('keydown', keyStrokeEvent); });

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