Mootools 1.2教程 事件处理


Posted in Javascript onSeptember 15, 2009

今天我们开始第五讲,在上一讲(《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); 
});

参考代码:
<body> 
<div id="id_name"> <! -- this element now recognizes the click event --> 
</div> 
</body>

注意:和超链接识别点击事件一样,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”见,语法略有一点不同:
参考代码:
var keyStrokeEvent = function(event){ 
// 下面代码是说: 
// 如果按下的键是“shift”,则做下面的事 
if (event.shift) { 
alert("You pressed shift.") 
}; 
} 
window.addEvent('domready', function() { 
$('myInput').addEvent('keydown', keyStrokeEvent); 
});

参考代码:
<div id="body_wrap"> 
<input id="myInput" type="text" /> 
</div>

示例
这里是上面我们写过的一些可以执行的代码:
注意:你可以在单击示例上面试一下,不过不是在上面松开鼠标,而是把鼠标一直按着从区块上离开,然后再松开。注意一下它没有触发点击事件。
参考代码:
var keyStrokeEvent = function(event){ 
// 下面的代码是说: 
// 如果按下的键为“k”,则做下面的事 
if (event.key == 'k') { 
alert("This Mootorial was brought to you by the letter 'k.'") 
}; 
} 
var mouseLeaveFunction = function(){ 
// 在这里添加事件发生时你要执行的任何代码 
alert('this element now recognizes the mouse leave event'); 
} 
var mouseEnterFunction = function(){ 
// 在这里添加事件发生时你要执行的任何代码 
alert('this element now recognizes the mouse enter event'); 
} 
var clickFunction = function(){ 
// 在这里添加事件发生时你要执行的任何代码 
alert('this element now recognizes the click event'); 
} 
window.addEvent('domready', function() { 
$('click').addEvent('click', clickFunction); 
$('enter').addEvent('mouseenter', mouseEnterFunction); 
$('leave').addEvent('mouseleave', mouseLeaveFunction); 
$('keyevent').addEvent('keydown', keyStrokeEvent); 
});

参考代码:
<div id="click" class="block">左键单击(Click)</div><br /> 
<div id="enter" class="block">鼠标进入(Mouse Enter)</div><br /> 
<div id="leave" class="block">鼠标离开(Mouse Leave)</div><br /> 
<input id="keyevent" type="text" value="请输入字符'k'" />

更多学习……

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

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

更多关于事件的资料

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

  • MooTools文档中的Events部分
  • MooTools文档中的Element.Events部分
  • 还有,阅读一下w3school网站上关于JavaScript事件的内容
Javascript 相关文章推荐
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jQuery动画与特效详解
Feb 01 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
js实现录音上传功能
Nov 22 Javascript
Mootools 1.2教程 函数
Sep 15 #Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 #Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 #Javascript
MooTools 1.2介绍
Sep 14 #Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 #Javascript
JavaScript 函数调用规则
Sep 14 #Javascript
prototype与jquery下Ajax实现的差别
Sep 13 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
javascript整除实现代码
2010/11/23 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
Python文档生成工具pydoc使用介绍
2015/06/02 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python实现密码强度校验
2020/03/18 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
数据员岗位职责
2013/11/19 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
个人求职信范文分享
2013/12/13 职场文书
大气污染防治方案
2014/05/19 职场文书
公司股东出资证明书
2014/11/01 职场文书
检讨书范文2000字
2015/01/28 职场文书
七一慰问简报
2015/07/20 职场文书
python处理json数据文件
2022/04/11 Python
Golang 对es的操作实例
2022/04/20 Golang