ExtJS事件处理

原创 于 2013-01-14 10:42:14 发布 · 923 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了标准的JavaScript事件绑定方式，包括HTML、JavaScript、IE浏览器特定的attachEvent方法，以及ExtJS中的事件绑定和自定义事件的使用。此外，还展示了如何在不同浏览器环境下实现事件绑定，并通过实例演示了ExtJS支持的自定义事件。

1、标准的事件绑定方式(1)

<html>
 <head>
  <title>标准的事件绑定方式(1)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <script language="JavaScript">
 function hello(){ alert('hello'); }
 </script>
 <body>
 <input type='button' id='btn' value='ok' onclick='hello()'>
 </body>
</html>

2、标准的事件绑定方式(2)只适合IE浏览器 document.getElementById('btn').attachEvent('onclick',hello1);

<html>
 <head>
  <title>标准的事件绑定方式(2)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
  <input type='button' id='btn' value='ok'>
 </body>
<script language="JavaScript">
 function hello1(){
  alert('hello1');
 }
 function hello2(){
  alert('hello2');
 }
 var button = document.getElementById('btn');
 button.attachEvent('onclick',hello1);//该方法适用于IE浏览器
 button.attachEvent('onclick',hello2);
</script>

3、ExtJS方式的事件绑定

<HTML>
 <HEAD>
  <TITLE>ExtJS方式的事件绑定</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 </HEAD>
   <script type="text/javascript">
 Ext.onReady(function(){
  function hello1(){
   alert('hello1');
  }
  function hello2(){
   alert('hello2');
  }
  var button = Ext.get('btn');
  button.addListener('click',hello1);//绑定事件处理函数
  button.addListener('click',hello2);
 });
  </script>
 <BODY>
  <input type='button' id='btn' value='ok'>
 </BODY>
</HTML>

4、ExtJS支持的自定义事件

<HTML>
 <HEAD>
  <TITLE>ExtJS支持的自定义事件</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 <script type="text/javascript">
  //创建Person类
  var Person = Ext.extend(Ext.util.Observable,{
   constructor : function(name){
      this.name = name;
      this.sayNum = 0;
      this.say = function(){
     if(this.sayNum < 2){
      this.sayNum += 1;
      alert('I am '+name);
     }else{
      this.sayNum = 0;//触发自定义事件后计数器归零
      this.fireEvent('onSay',this);//激发自定义事件
     }
      }
      this.addEvents({//加入自定义事件
      "onSay" : true
      });
   }
  });
  var per = new Person('tom');//创建对象
  //为自定义事件绑定处理函数
  per.addListener('onSay',function handler(){
   alert('发生了自定义事件');
  });
 </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' onclick='per.say()'>
 </BODY>
</HTML>

5、Firefox浏览器addEventListener方法示例

<html>
 <head>
  <title>Firefox浏览器addEventListener方法示例</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
  <input type='button' id='btn' value='ok'>
 </body>
<script language="JavaScript">
 function hello1(){
  alert('hello1');
 }
 function hello2(){
  alert('hello2');
 }
 var button = document.getElementById('btn');
 button.addEventListener('click',hello1,false);
 button.addEventListener('click',hello2,false);
</script>
</html>

6、适合IE

<HTML>
 <HEAD>
  <TITLE>addListener绑定处理函数示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
        //继承自Ext.util.Observable
  var Person = Ext.extend(Ext.util.Observable,{
   constructor : function(name){
      this.name = name;
      this.say = function(){
     this.fireEvent('onSay',this.name);//激发自定义事件
      }
      this.addEvents({//加入自定义事件
      "onSay" : true
      });
   }
  });
  var per = new Person('tom');//创建对象
  function test(name){
   alert("I'am " + name);
  }

  //为自定义事件绑定处理函数
  per.addListener('onSay',test(name));
  
  </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' onclick='per.say()'>
 </BODY>
</HTML>

7、使用各种浏览器

<HTML>
 <HEAD>
  <TITLE>addListener绑定处理函数示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
        //继承自Ext.util.Observable
  var Person = Ext.extend(Ext.util.Observable,{
   constructor : function(name){
      this.name = name;
      this.say = function(){
     this.fireEvent('onSay',this.name);//激发自定义事件
      }
      this.addEvents({//加入自定义事件
      "onSay" : true
      });
   }
  });
  var per = new Person('tom');//创建对象

  //为自定义事件绑定处理函数
  per.addListener('onSay',function(name){
   alert("I'am " + name);
  });
  
  </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' onclick='per.say()'>
 </BODY>
</HTML>

8、

<HTML>
 <HEAD>
  <TITLE>拦截器使用示例Observable.capture</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
 //继承自Ext.util.Observable
 var Person = Ext.extend(Ext.util.Observable,{
  constructor : function(name){
     this.name = name;
     this.say = function(){
    this.fireEvent('onSay',this.name);//激发自定义事件
     }
     this.addEvents({//加入自定义事件
     "onSay" : true
     });
  }
 });
 var per = new Person('tom');//创建对象
  
 per.addListener('onSay',handler);//为自定义事件绑定处理函数
 function handler(){//事件处理函数
  alert('发生了自定义事件');
 }
 //为per对象添加拦截器
 Ext.util.Observable.capture(per,captureFunction);
 //拦截函数
 function captureFunction(eventName){
  if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
   alert("拦截事件：“"+eventName+"”。");
   return false;
  }
  return true;
 }
  </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' onclick='per.say()'>
 </BODY>
</HTML>
9、

<HTML>
 <HEAD>
  <TITLE>addManagedListener受管事件监听器</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
    <STYLE TYPE="text/css">
 .newIcon { background-image: url(https://blog.csdn.net/chapter03/images/new.gif) !important; }
 .openIcon { background-image: url(https://blog.csdn.net/chapter03/images/open.gif) !important; }
 .saveIcon { background-image: url(https://blog.csdn.net/chapter03/images/save.gif) !important; }
  </STYLE>
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 </HEAD>
<BODY STYLE="margin: 10px"></BODY>
  <script type="text/javascript">
 Ext.onReady(function(){
  function createFn(){
   alert('新建');
  }
  function openFn(){
   alert('打开');
  }
  function saveFn(){
   alert('保存');
  }
  Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
   renderTo: Ext.getBody(),
   bodyPadding: 5,
   width:300,
   items : [
       {text:'新建',id:'createBtn',iconCls:'newIcon'},
    {text:'打开',id:'openBtn',iconCls:'openIcon'},
    {text:'保存',id:'saveBtn',iconCls:'saveIcon'},
    {text:'销毁新建按钮',id:'destroy1',handler : function(){
     //销毁新建按钮
     Ext.getCmp('createBtn').destroy();
     Ext.getCmp('destroy1').destroy();
    }}
   ]
  });
  var createBtn = Ext.getCmp('createBtn');
  createBtn.on('click',createFn);
  //以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
  //了则事件绑定同时解除。
  createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
  createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);
 });
  </script>
</HTML>
10、

<HTML>
 <HEAD>
  <TITLE>relayEvents传播分发事件</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 <script type="text/javascript">
  //创建Employee工人类
  var Employee = Ext.extend(Ext.util.Observable,{
   constructor : function(config){
      this.name = config.name;
      this.eat = function(){
     this.fireEvent('startEat',this);//激发开始吃饭事件
     this.fireEvent('finishEat',this);//激发结束吃饭事件
      }
      this.addEvents({//加入自定义事件
      "startEat" : true,//开始吃饭事件
      "finishEat" : true//结束吃饭事件
      });
      Employee.superclass.constructor.call(this, config)
   }
  });
  
  //定义Waiter服务员类
  var Waiter = Ext.extend(Ext.util.Observable,{
   constructor : function(config){
    Waiter.superclass.constructor.call(this, config);
   }
  });
  //创建员工对象
  var emp = new Employee({name:'tom'});
  //为自定义事件绑定处理函数
  emp.addListener('startEat',function(){
   alert(this.name + '开始吃饭了。');
  });
  emp.addListener('finishEat',function (){
   alert(this.name + '吃完饭，可以收拾盘子了。');
  });
  //创建服务员对象
  var waiter = new Waiter();
  //使服务员对象与员工对象的finishEat事件进行关联
  //也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，
  //然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。
  waiter.relayEvents(emp, ['finishEat']);
  waiter.on('finishEat',function(){
   alert('服务员开始收拾盘子。');
  });
 </script>
 </HEAD>
 <BODY>
 <input type='button' value='员工吃饭' onclick='emp.eat()'>
 </BODY>
</HTML>

11、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>Ext.EventObject示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/src/core/src/locale/ext-lang-zh_CN.js"></script>
 </HEAD>
<BODY>
 <input id='buttonTest' type='button' value='click'>
</BODY>
<script type="text/javascript">
 var btn = Ext.get('buttonTest');
 btn.addListener('click',handler);//为click事件绑定处理函数
 function handler(e){//事件处理函数
  //获取事件发生时的x坐标
  var x = e.getPageX();
  //获取事件发生时的y坐标
  var y = e.getPageY();
  var msg = '事件发生坐标 : x='+x+' y='+y;
  alert(Ext.EventManager.getPageXY(e));
  alert(msg);
 }
</script>
</HTML>
1、

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>Ext.EventManager应用举例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/src/core/src/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
   Ext.EventManager.addListener('btn','click',handler);//绑定处理函数
   function handler(e){//事件处理函数
    //获取事件发生时的x坐标
    var x = e.getPageX();
    //获取事件发生时的y坐标
    var y = e.getPageY();
    var msg = '事件发生坐标 : x='+x+' y='+y;
    alert(Ext.EventManager.getPageXY(e));
    alert(msg);
    alert('hello');
   }
   /**function handler(){//事件处理函数
    alert('hello');
   }*/
  });
  </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' id='btn'>
 </BODY>
</HTML>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值