MooTools教程(5):事件处理


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

左键单击事件

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

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

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

参考代码: [复制代码] [保存代码]
  1. var clickFunction = function(){
  2.     // 在这里添加事件发生时你要执行的任何代码
  3.     alert('this element now recognizes the click event');
  4. }
  5.  
  6. window.addEvent('domready'function() {
  7.     $('id_name').addEvent('click', clickFunction);
  8. });
参考代码: [复制代码] [保存代码]
  1. <body>
  2.     <div id="id_name"> <! -- this element now recognizes the click event -->
  3.     </div>
  4. </body>

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

鼠标进入和离开事件

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

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

参考代码: [复制代码] [保存代码]
  1. var mouseEnterFunction = function(){
  2.     // 在这里添加事件发生时你要执行的任何代码
  3.     alert('this element now recognizes the mouse enter event');
  4. }
  5.  
  6. window.addEvent('domready'function() {
  7.     $('id_name').addEvent('mouseenter', mouseEnterFunction);
  8. });

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

参考代码: [复制代码] [保存代码]
  1. var mouseLeaveFunction = function(){
  2.     // 在这里添加事件发生时你要执行的任何代码
  3.     alert('this element now recognizes the mouse leave event');
  4. }
  5.  
  6. window.addEvent('domready'function() {
  7.    $('id_name').addEvent('mouseleave', mouseLeaveFunction);
  8. });

删除一个事件

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

参考代码: [复制代码] [保存代码]
  1. // 和前一个示例一样
  2. // 只不过把.addEvent换成了.removeEvent
  3. $('id_name').removeEvent('mouseleave', mouseLeaveFunction);

textarea或者input中的按键事件

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

参考代码: [复制代码] [保存代码]
  1. var function = keydownEventFunction () {
  2.     alert('This textarea can now recognize keystroke events');
  3. };
  4.  
  5. window.addEvent('domready'function() {
  6.     $('myTextarea').addEvent('keydown', keydownEventFunction);
  7. });

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

参考代码: [复制代码] [保存代码]
  1. // 注意函数括号中的“event”参数
  2. var keyStrokeEvent = function(event){
  3.     // 下面的代码是说:
  4.     // 如果按下的键为“k”,则做下面的事
  5.     if (event.key == "k") {  
  6.     alert("This tutorial has been brought you by the letter k."
  7.     };
  8. }
  9.  
  10. window.addEvent('domready'function() {
  11.     $('myInput').addEvent('keydown', keyStrokeEvent);
  12. });

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

参考代码: [复制代码] [保存代码]
  1. var keyStrokeEvent = function(event){
  2.     // 下面代码是说:
  3.     // 如果按下的键是“shift”,则做下面的事
  4.     if (event.shift) { 
  5.     alert("You pressed shift."
  6.     };
  7. }
  8.  
  9. window.addEvent('domready'function() {
  10.     $('myInput').addEvent('keydown', keyStrokeEvent);
  11. });
参考代码: [复制代码] [保存代码]
  1. <div id="body_wrap">
  2.     <input id="myInput" type="text" />
  3. </div>

示例

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

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

参考代码: [复制代码] [保存代码]
  1. var keyStrokeEvent = function(event){
  2.     // 下面的代码是说:
  3.     // 如果按下的键为“k”,则做下面的事
  4.     if (event.key == 'k') { 
  5.         alert("This Mootorial was brought to you by the letter 'k.'")  
  6.     };
  7. }
  8.  
  9. var mouseLeaveFunction = function(){
  10.     // 在这里添加事件发生时你要执行的任何代码
  11.     alert('this element now recognizes the mouse leave event');
  12. }
  13.  
  14. var mouseEnterFunction = function(){
  15.     // 在这里添加事件发生时你要执行的任何代码
  16.     alert('this element now recognizes the mouse enter event');
  17. }
  18.  
  19. var clickFunction = function(){
  20.     // 在这里添加事件发生时你要执行的任何代码
  21.     alert('this element now recognizes the click event');
  22. }
  23.  
  24. window.addEvent('domready'function() {
  25.     $('click').addEvent('click', clickFunction);
  26.     $('enter').addEvent('mouseenter', mouseEnterFunction);
  27.     $('leave').addEvent('mouseleave', mouseLeaveFunction);
  28.     $('keyevent').addEvent('keydown', keyStrokeEvent);
  29. });
参考代码: [复制代码] [保存代码]
  1. <div id="click" class="block">左键单击(Click)</div><br />
  2. <div id="enter" class="block">鼠标进入(Mouse Enter)</div><br />
  3. <div id="leave" class="block">鼠标离开(Mouse Leave)</div><br />
  4. <input id="keyevent" type="text" value="请输入字符'k'" />

左键单击(Click)

鼠标进入(Mouse Enter)

鼠标离开(Mouse Leave)

 

更多学习……

下载一个包含你开始所需要的所用东西的zip包

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

更多关于事件的资料

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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3