本文介绍ExtJS中事件处理的核心机制，重点讲解如何通过Element实例的on()和un()方法注册和移除事件监听器。通过具体代码示例，演示如何获取DOM元素、定义回调函数以及处理click事件参数，帮助开发者快速掌握ExtJS事件绑定的基本操作。
ExtJS事件处理基础
在构建ExtJS应用程序时，注册事件处理程序是最频繁的操作之一，因为ExtJS应用的核心逻辑几乎完全由事件驱动。为了简化这一过程，ExtJS提供了便捷的API，包括on()和un()方法，或者更明确的addListener()与removeListener()。这些方法适用于Element的所有子类，使得事件绑定变得直观且灵活。
<divid="happyDiv"class="happyStyle"/>
注册与移除事件监听器
接下来，我们需要为这个<div/>元素注册一个鼠标单击事件。首先，必须通过Ext.get()方法获取该div对应的Element实例，这是后续操作的基础。
varhappyDiv=Ext.get('happyDiv');
随后，定义用于处理该事件的具体逻辑函数。
代码如下:
varclickHandler=function(event,eventTarget){
Ext.MessageBox.alert("Click","Youclicked:"+eventTarget.id);
} 最后，使用on()方法将定义好的事件处理函数绑定到Element实例上，完成事件监听器的注册。
代码如下:
happyDiv.on('click',clickHandler);运行程序后，当用户单击<div/>元素时，页面会弹出提示框，显示如图3-15所示的结果。
这个过程非常直观。示例文件位于ch03/event_demo.html。如果需要移除已注册的事件处理程序，只需将on()替换为un()即可。即使移除时该事件没有对应的处理程序，底层的EventManager也会自动处理这种情况，不会报错。当事件处理程序被调用时，它会接收三个参数：event、eventTarget和optionObj。在示例中，我们只使用了前两个参数，第三个参数将在后续讨论EventManager时详细介绍。目前重点关注event和eventTarget：event的类型为Ext.Event，代表浏览器触发的具体事件对象；eventTarget则是触发事件的HTML元素本身。在浏览器用户点击<div/>时，会触发click事件并调用clickHandler()。对于clickHandler()而言，接收到的event即为浏览器生成的click事件对象，而eventTarget则是目标元素<div/>，其id属性值为“happyDiv”。关于事件的根类定义，具体实现细节见下文代码。