如何在Ext JS按钮渲染完成后添加点击监听器？最优方案

针对你这种已经创建并渲染按钮后，想后续添加点击监听器的需求，Ext JS提供了几种简单且可靠的方式，下面给你逐一说明：

1. 使用组件的on()方法（推荐） #

on()是Ext JS组件绑定事件的标准简写方法，专门用于监听组件级别的事件（比如适配跨端的tap，或者桌面端的click）。只要你持有按钮的引用，在按钮渲染完成后随时可以调用这个方法：

button.on("tap", function () { 
    alert("tap 1 works"); 
});

2. 使用addListener()方法（与on()等价） #

addListener()是on()方法的完整写法，功能完全一致，你可以根据个人习惯选择使用：

button.addListener("tap", function() { 
    alert("tap 2 works"); 
});

3. 绑定原生DOM的click事件 #

如果你想直接操作按钮对应的DOM元素，绑定原生的click事件，可以通过按钮的el属性获取DOM元素后再绑定：

button.el.on("click", function() { 
    alert("click works"); 
});

注意：这种方式绑定的是原生DOM事件，而前两种是Ext JS组件封装的事件（会自动处理触摸、跨端适配等细节），所以优先推荐前两种组件级事件绑定方式。

完整示例代码 #

把这些方法整合到你的代码中，完整示例如下：

Ext.application({ 
    name : 'Fiddle', 
    launch : function() { 
        var button = Ext.create('Ext.Button', { 
            text: 'Button' 
        }); 
        Ext.Viewport.add({ 
            xtype: 'container', 
            padding: 10, 
            items: [button] 
        }); 
        // 绑定组件tap事件
        button.on("tap", function () { 
            alert("tap 1 works"); 
        }); 
        // 等价的addListener写法
        button.addListener("tap", function() { 
            alert("tap 2 works"); 
        }); 
        // 绑定原生DOM click事件
        button.el.on("click", function() { 
            alert("click works"); 
        }); 
    } 
});

延迟绑定的情况 #

如果是像你代码里的setTimeout这种延迟场景，只要按钮的引用没有丢失，同样可以使用这些方法：

setTimeout(function() { 
    button.on("tap", function () {
        alert("延迟1秒绑定的tap事件触发了");
    });
}, 1000);

内容的提问来源于stack exchange，提问作者Brandon