Ext Js学习笔记 --- 事件辅助对象

Ext.lib.Event
 Ext.lib.Event是定义在adapter中的工具类,它封装了不同浏览器的事件处理函数,为上层组件提供了统一的功能接口。

 主要函数
 getX()、getY()、getXY()获得发生的事件在页面中的坐标位置。getXY()返回的是一个数组,可以参数getXY()[0]得到X坐标,getXY()[1]得到Y坐标。
 getTarget()返回事件的目标元素,它统一了IE和其它浏览器使用的ev.target和ev.srcElement。
 on()和un()注册和注销事件监听听
 purgeElement()注销元素上的所有事件监听听。
 preventDefault()取消浏览器对当前事件所执行的默认操作。
 stopPropagation()停止事件传递
 stopEvent()停止当前事件
 onAvailable()函数有三个参数:id、fn和scope。它的作用是等到id对应的HTML元素可用时才执行fn这个函数,scope表示调用函数的作用域。在函数内部其实是使用了setInterval()作循环检测的。
 resolveTextNode()这个函数与事件没有关系,它仅仅是用来判断。如果参数node是一个文本节点,则返回它的上层节点;否则返回node本身。
 getRelatedGarget()函数会返回事件相关的HTML,它先尝试ev.relatedTarget。如果这个属性不存在,就参数ev.type判断事件类型,如果ev.type == “mouseout”,就返回ev.toElement;如果ev.type == “mouseover”就返回ev.fromElement。

Ext.util.Observable
在Ext事件模型中,Ext.util.Observable有着举足轻重的作用,它位于Ext组件的顶端,为Ext组件提供了处理事件的最基本功能。如果要实现一个可以处理事件的组件,最直接的方法就是继承它。
在本文介绍自定义事件中,我们就使用了它的addEvents方法进行事件注册,并使用on方法进行事件绑定,使用fireEvent触发自定义事件。想必对这些方法都有一定的了解。这些基本操作在这里就不再作详实解释,现在介绍与事件有关的高级功能。
在这之前,在介绍addListener/on方法时,参数它包含有两个必须的参数和两个可选参数。在这里介绍下两个可选参数的使用:

<input type="button" value="复杂参数" id="test" />
<script language="javascript" type="text/javascript">
    function testClick(e, el, args) {
        alert(e.type);
        alert(el.value);
        alert(args.testId);
    }
    Ext.get("test").on("click", testClick, this, {
        single: true,
        delay: 100,
        testId: 4
    });
</script>


 在这里,为id=test的按钮注册了click事件,它使用了四个参数。其中this代表testClick的作用域,第三个参数就是复合参数,它的值分为两大部分:事件控制参数,如single和delay,主要是Ext事件模型用来控制事件的;另一部分是自定义参数,如testId,是为直接传递到事件响应方法使用的。在这个复杂参数中,singl:true表示这个注册的事件处理函数仅执行一次,delay:100表示函数在事件发生后100ms才执行。
在testClick事件中,它的参数有三:
 e  Ext.list.EventObject对象
 el  是on中的第三参数
 args  是on中的第四参数

注:复杂参数中,有一与delay相似的属性buffer。两者都是延迟一段时间后执行对应的监听听函数,但buffer会创建一个Ext.util.DelayTask对象,并把fn放入其中等待执行。在等待的过程中,如果再次触发了事件,那么上次的任务就会被取消,并把新的fn放入任务队列里,这样就可以保证fn不会重复执行多次。

 除了复合参数,还可以使用on()一次定义多个事件监听听器,如下:

Ext.get("test").on(
        "click":{ 
            fn : fn,
            single: true,
            delay: 4
        }, 
        "mouseover":{
            fn : fn
        }
    );


 Ext.util.Observable除了上面介绍的事件处理外,还有一个重要的功能:可以为某个事件设置拦截器,统一管理方法的触发。我们使用capture()和releaseCapture()来实现这个功能。
 使用capture()函数拦截事件的触发,如下的代码所示:

 <input id="capture1" value="拦截事件" type="button" />
<script language="javascript" type="text/javascript">
    var a = 0;
    Ext.get("capture1").on("click", function() {
        Ext.util.Observable.capture(person, function() {
            return (a++) % 2 == 0;
        });
    });
</script>


 只要点击了capture1之后,再触发person的事件,就可以发现,事件间隔触发,那是因为在事件拦截器中,根据a的值来返回。在实际应用中,可以根据应用返回值。当返回值是false时,事件不会被触发。从间隔触发的事件也可以知道,拦截器是在每次事件的触发之前先响应的,并是每次都会触发。
 与capture()函数对应的是releaseCapture(),它会一次性清除fireEvent()上所有的拦截函数,不过江产能通过它准确地删除某一拦截函数。一旦执行了releaseCapture(),那么之前设置的所有拦截函数都失效了。如:

<input id="capture2" value="注销拦截" type="button" />
<script language="javascript" type="text/javascript">
    Ext.get("capture2").on("click", function() {
        Ext.util.Observable.releaseCapture(person);
    });
</script>


注:capture()与releaseCapture()只适用于自定义事件。假若使用它来拦截浏览器事件的话,不会起作用,如:

 <input type="text" id="keypress1"  />
<script language="javascript" type="text/javascript">
    Ext.get("keypress1").on("keypress", function(e) {
        if (e.getCharCode() == Ext.EventObject.SPACE) {
            Ext.Msg.alert("Info", "空格");
        }
    });
</script>
<input id="Button1" value="拦截浏览器事件" type="button" />
<script language="javascript" type="text/javascript">
    Ext.get("Button1").on("click", function() {
        Ext.util.Observable.capture(Ext.get("keypress1"), function() {
            return false;
        });
    });
</script>


 这样就算点击了Button1按钮,keypress1的事件也会正常执行。

 如果想一次性暂停某个对象的所有事件,可以考虑使用suspendEvents()函数,如下:

<input type="button" value="暂停事件" id="suspend" />
<script language="javascript" type="text/javascript">
    Ext.get("suspend").on("click", function() {
        person.suspendEvents();
    });
</script>


 调用suspendEvents()之后,person的所有事件就都暂停了,如果想继续的话,需要调用resumeEvents()才能取消这个效果,如下:

Ext.EventManager
 作为事件监听听器,Ext.EventManager定义了一系列事件相关的函数,常用的包括:
 addListener/on    注册事件
 removeListener/un    注销事件
 onDocumentReady/onReady  页面加载事件
 onTextResize     监听听浏览器字体大小
 onWindowResize    浏览器窗口大小改变事件
 
Ext.EventObject
 Ext.EventObject是对事件的封装,将自定义事件和浏览器事件结合在一起使用。除此之外,还提供了丰富的辅助工具函数,帮助我们获得事件相关的信息。
 Ext.EventObject定义了一系列的功能按键,处理按键事件时,就不用再去硬背ASCII码了,如:
 Ext.EventObject中的名字  ASCII码    作用
 ENTER      13     回车
 ESC          27     ESC按键
 LEFT         37     LEFT按键
 UP            38     UP按键
 RIGHT       39     RIGHT按键
 DOWN      40     DOWN按键
 …….

 常用方法
 getCharCode()   得到event接收到的按键字符
 getPageX()         得到事件触发时,鼠标相对于页面的X偏移
 getPageY()         得到事件触发时,鼠标相对于页面的Y偏移
 getXY()               得到事件触发时,鼠标相对于页面的偏移,返回值为数组,依次是X和Y值。

Tag标签: ext 事件
发表于 2009-10-18 19:44:54 收藏 所属分类: Ext Js 网摘收藏
相关文章: