Mootools 1.2教程事件处理_Mootools

web前端|js教程 Mootools 1.2教程事件处理_Mootools

Mootools,事件处理

web前端-js教程

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

qq名片赞php源码,vscode f5,ubuntu 卸载 xim,Tomcat做登录案例,爬虫凝胶,php phpfpm,惠州站外seo公司,.net网站源码怎么安装,网站模板源码使用教程lzw


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

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

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);
});

var function = keydownEventFunction () {
alert('This textarea can now recognize keystroke events');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});

// 注意函数括号中的“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); 
}); 

参考代码：

示例
这里是上面我们写过的一些可以执行的代码：
注意：你可以在单击示例上面试一下，不过不是在上面松开鼠标，而是把鼠标一直按着从区块上离开，然后再松开。注意一下它没有触发点击事件。
参考代码：

bt资源源码,ubuntu桌面卡死原因,网络爬虫编写工具,php后段框架,大型seo标准lzw

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); 
});

参考代码：

左键单击（Click）

鼠标进入（Mouse Enter）

鼠标离开（Mouse Leave）

更多学习……