搜索:
首页 >> JavaScript >> Js高级编程 >> Mootools 1.2教程(5)——事件处理

Mootools 1.2教程(5)——事件处理

2008-11-19 作者:Fdream 来源:Fdream博客 投递文章

原文地址:30 Days of Mootools 1.2 Tutorials - Day 5 - Event Handling

MooTools 1.2中的事件处理

今天我们开始第五讲,在上一讲(《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”,意味着当你鼠标松开是发生,而不是鼠标按下去的时候发生。这就给了用户一个机会去改变他们的主意——只要在松开之前把鼠标的指针从点击的元素上移开就可以了。

1   2  3  4 下一页 尾 页
相关文章