第三篇 Ext的事件机制

ruanzy888888

浏览: 88357 次
性别:
来自: 宜昌

最近访客更多访客>>

fanan_666

清风不识字何故乱翻书

aa8945163

xuyongff

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT JavaScript CSS IE 浏览器

js的事件主要分为两类：浏览器事件和自定义事件

A.先看看Ext是如何自定义事件的

第一步：定义一个自定义"类"(js没有类的概念),添加属性、方法和事件

var Person = function(name,age){

//属性

this.name = name;

this.age = age;

//方法

this.eat:function(){

}

//添加事件

this.addEvents('walk','eat');

};

第二步：让类继承Ext.Observable(定义了一些基本的事件机制)，为对象添加事件监听

Ext.extend(Person,Ext.util.Observable,{扩展的属性和方法});

var p = new Person('rzy',20);

p.on('eat',function(e,el,args){},scope,args);

第三步：触发对象的事件

p.fireEvent('事件名',参数列表...);

完整的代码:

var Person = function(name,age){
    this.name = name;
    this.age = age;
    this.eat:function(){

    }
    this.addEvents('walk','eat');
};
Ext.extend(Person,Ext.util.Observable,{扩展的属性和方法}); 
var p = new Person('rzy',20);
p.on('eat',function(){},scope,args);
p.fireEvent('事件名',参数列表...);

B.再来看看浏览器事件(onclick,onmouseover,oncontextmenu,onkeyup...)

举一个例子吧

<html>    
    <head>    
        <link type="text/css" rel="stylesheet" href="extjs/resource/css/ext-all.css"/>   
        <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>    
        <script type="text/javascript" src="extjs/ext-all.js"></script>       
        <script type="text/javascript">    
            var fn = function(){   
                Ext.get('btn').on('click',function(e,btn){
                    alert('事件机制');
                },this,args);
            };    
            Ext.onReady(fn);    
        </script>    
    </head>    
    <body>  
        <input id="btn" type="button" value="点我"/> 
    </body>    
</html>

接下来，关键的时候到了。现在来看看原生js的事件机制吧，这有助于你学习任何js框架(主要是解决跨浏览器的问题)

首先看看原生js如何为对象附加浏览器事件吧(以IE和FF为例)

IE：obj.attachEvent('onclick',function(){});

FF：obj.addEventListner('click',function(){},false);

在这里提一下事件对象event

IE：是作为一个全局变量window.event

FF：当事件触发时,必须显示的作为第一个参数来传递

Ext：EventObject

举一个例子吧

<html>       
    <head>       
       <link type="text/css" rel="stylesheet" href="extjs/resource/css/ext-all.css"/>      
        <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>       
        <script type="text/javascript" src="extjs/ext-all.js"></script>          
        <script type="text/javascript">       
            var ff = function(e){      
                var sender= e?e.target:window.event.srcElement;                
                alert(sender);   
            };  
        </script>       
    </head>       
    <body>     
        <input id="btn" type="button" value="点我" onclick=ff(e);/>
    </body>       
</html>

个人不太喜欢上面传统的这种侵入式的事件定义方式，改为注记式

document.getElementById('btn').onclick = ff;//注意这里绑定的是方法的引用ff,而不是ff();

但是问题又出现了原生的js只能单一绑定,要再绑定一个点击事件就会覆盖前面的

该Ext出场了,它可以为元素绑定多个句柄，它是怎么做到的?去看看Ext关于事件机制的这部分源码吧,特别是观察者模式

分享到：

第四篇 Ext Core篇 | 第二篇工欲善其事必先利其器

2010-10-29 23:16
浏览 852
评论(0)
分类:Web前端
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论