自定义事件

最新推荐文章于 2025-03-25 08:15:00 发布

jhlisprimer

最新推荐文章于 2025-03-25 08:15:00 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs 文章标签： EXT JavaScript CSS HTML ViewUI

本文链接：https://blog.youkuaiyun.com/jhlisprimer/article/details/83836375

ExtJs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在EXTJS中创建自定义事件模型。通过定义Person类并为其添加walk、eat、sleep等事件，展示了如何使用addEvents、addListener及fireEvent等方法来实现事件触发与监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EXT中遵循一种树状的事件模型，所有继承自Ext.util.Observeable类的控件都可以支持事件。可以为这些继承了Ext.util.Observable的对象定义一些事件，然后为这些事件配置监听器。当某个事件发生时，Ext会自动调用监听器，这些就是Ext的事件模型。

1.首先定义个一个Person类，及其自定义事件。

Ext.namespace("Ext.com.sunrex");

Ext.com.sunrex.Person = function(_name) {
	this.name = _name;
	this.addEvents("walk", "eat", "sleep");
}

Ext.extend(Ext.com.sunrex.Person, Ext.util.Observable, {
	info: function(event) {
		return  this.name + ' is ' + event + 'ing';
	}
});

以上实现了一个名称为Person的对象，他有一个属性name。初始化时，调用this.addEvents(...)函数，定义了三个事件：walk、eat、sleep，最后使用Ext.extend() 让Person继承Ext.util.Observable的所有属性。此外我们还加上了一个函数info()，让它返回Person的信息。

2、在HTML中定义一个Person实例，然后为它的时间配置好监听器，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>HelloWorld.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../extjs_lib/resources/css/ext-all.css">
  	<script type="text/javascript" src="../extjs_lib/adapter/ext/ext-base.js"></script>
  	<script type="text/javascript" src="../extjs_lib/ext-all.js"></script>
  	<script type="text/javascript" src="../js/A_004_HelloWorld.js"></script>
  	<script type="text/javascript">
  		var person = new Ext.com.sunrex.Person("张三 --> ");
  		person.addListener('walk', function() {
  			Ext.Msg.alert('event', person.name + "走呀走呀走！");
  		});
  		
  		person.on("eat", function() {
  			Ext.Msg.alert('event', person.name + " 吃呀吃呀吃！");
  		});
  		
  		person.on('sleep', function() {
  			Ext.Msg.alert('event', person.name + " 睡呀睡呀睡！");
  		});
  		
  		function invokeWalk() {
  			person.fireEvent('walk');
  		}
  		
  		Ext.onReady(function() {
  			Ext.get('eat').addListener('click', function() {
  				person.fireEvent('eat');
  			});
  			Ext.get('sleep').on('click', function() {
  				person.fireEvent('sleep');
  			});
  		});
  		
  	</script>
  </head>
  
  <body>
  	<input type="hidden" id="h">
    <input type="button" id="walk" value="walk" onclick="invokeWalk()"><br>
    <input type="button" id="eat" value="eat"><br>
    <input type="button" id="sleep" value="sleep"><br>
  </body>
</html>

上面的on就是addListener()的简写形式，功能完全一样。第一个参数是事件的名称，第二个参数是事件发生时要执行的函数。

同理un是removeListener()的简写形式。

还有一个函数purgeListeners()，他可以办所有的监听器都删除。