`
zarknight
  • 浏览: 147913 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mootools【六】- Event篇

阅读更多

mootools中定义了一个Event类,它提供了对原始window的事件对象event的扩展,使用的时候,可以 把原来的event对象作为Event的构造方法参数传入:

var event = new Event(event);

这样,返回的event就包含了所有mootools经过扩展的功能,具体扩展的属性和方法如下:

================================================================

属性:

 shift - 当触发的事件是键盘按键事件时,判断按下的按键是否是shift键

$('myLink').onkeydown = function(event){
     var event = new Event(event);        //扩展了的event  
     alert(event.shift);                              //如果按下的按键是shift,则alert结果为true

 };

[control,alt,meta用法和shift相同。]

 

code - 当触发的事件是键盘按键事件时,按下键的keycode

 

page.x - 鼠标事件触发时,鼠标相对于整个窗体的x

page.y - 鼠标事件触发时,鼠标相对于整个窗体的y

client.x - 鼠标事件触发时,鼠标相对于当前视野的y

client.y - 鼠标事件触发时,鼠标相对于当前视野的y

(一般情况下,client.x,client.y效果和page.y,page.y一样;但当窗体出现滚动条的时候,两者效果就有差别了。)

 $('myInput').addEvent('click',function(event){
      var event = new Event(event);
      alert(event.page.y + "||" + event.client.y);
 });


 key - 当触发的事件是键盘按键事件时,按下按键的名字,如:"enter","esc"等等。

 

target - 发生事件的元素。

relatedTarget - 发生mouseover和mouseout事件时的元素对象的参照对象。

 

================================================================

方法:stop

作用:停止事件的执行

 

方法:stopPropagation

作用:停止事件的冒泡传递

 

方法:preventDefault

作用:停止事件的默认动作

 

由于Event的引进,mootools又给Function扩展了一个方法:

bindWithEvent

它和Function的bindAsEventListener方法用法基本相同,不一样的是,bindAsEventListener方法传递到事件监听器中的是原来的event对象,而bindWithEvent则是Event的实例对象。

 

 

 

分享到:
评论

相关推荐

    mootools-中文教程

    #### 六、Event篇 Mootools提供了丰富的事件处理机制,使得开发者能够轻松地管理页面上的各种交互事件。 ##### 事件处理方法 - **addEvent() / removeEvent()**:绑定或解除绑定事件监听器。 - **fireEvent()**:...

    mootools 弹出框

    本篇文章将深入探讨如何在MooTools框架下创建和使用弹出框。 **一、MooTools 的基础** MooTools遵循一个模块化的结构,通过引入核心库和其他可选模块,可以轻松扩展功能。在创建弹出框之前,我们需要确保页面已经...

    prototype1.6和mootools1.2.3在本人目前工作中比较常用的方法比较

    这篇博客将深入探讨这两个库在实际工作中的常见用法,并进行比较。 首先,Prototype是一个轻量级的JavaScript库,它的核心设计思想是扩展JavaScript的基本类型,让JavaScript对象更加面向对象。在Prototype 1.6中,...

    mootools实现的动态菜单

    本篇将深入探讨如何使用MooTools实现动态菜单,并兼容Firefox和Internet Explorer 8。 1. **MooTools简介** MooTools是一个轻量级且模块化的JavaScript框架,其设计理念是提供简洁的API和强大的功能,以简化Web...

    ToolTip_mootools

    本篇文章将深入探讨如何利用 MooTools 实现 Tooltip 效果,以及它在实际应用中的价值。 1. **什么是 Tooltip 和 MooTools?** - Tooltip 是一种网页元素,当用户将鼠标悬停在某个元素上时,会显示一个包含附加信息...

    (二) mootools的DOM操作

    在本篇文章中,我们将深入探讨MooTools的DOM操作,包括元素选择、创建、属性操作、事件处理以及动画效果。 首先,MooTools提供了多种方法来选取DOM元素。`$$`函数是MooTools中最常用的元素选择器,它可以接受CSS...

    mootools分页多选搜索部件特效代码

    在本篇中,我们将深入探讨如何利用MooTools实现分页和多选搜索的特效代码。 ### 1. 分页功能 分页是网页中常见的数据展示方式,尤其在处理大量数据时,能够提高用户体验。MooTools通过提供`Pages`模块来实现这一...

    Web前端问题Jquery篇.docx

    - `eventtype` 和 `eventtarget` 分别表示事件类型和触发事件的目标元素。 4. **获取input框输入内容** 使用 `val()` 方法,如 `$("#inputId").val();` 获取id为"inputId"的输入框内容。 5. **jQuery AJAX** - ...

    分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码

    这篇文章主要介绍了一个使用Mootools库实现的鼠标滑过进度条改变进度值的功能。Mootools是一个JavaScript框架,它提供了一系列强大的工具,用于简化前端开发,包括DOM操作、事件处理、动画效果等。 首先,我们来看...

    不要使用jQuery触发原生事件的方法

    例如,MooTools中的`fireEvent`方法。因此,本篇讨论的概念不仅适用于jQuery,还适用于其他工具库,如MooTools等。 在实际开发过程中,如果你需要依赖于jQuery或其他库来完成某些任务,如触发事件,建议遵循以下几...

Global site tag (gtag.js) - Google Analytics