MooTools教程

当前位置:首页>Mootools>MooTools教程>mootools框架教程(6) -Event篇:主要属性及方法解析

mootools框架教程(6) -Event篇:主要属性及方法解析

时间:2015-07-13 14:34来源:网络整理 作者:KKWL 点击:
导言:mootools框架教程(6) -Event篇:主要属性及方法解析。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css
  • 导言:mootools框架教程(6) -Event篇:主要属性及方法解析。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

    说明: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){
       varevent=newEvent(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的实例对。

------分隔线----------------------------