将click事件添加到元素？

Question

如何将单击事件分配给eg. <span id="foo">foo</span>ST2应用程序中的任意span()？

我有一个简单的例子,说明了我想做的事情.在这个例子中,我写了这些字母A,B,C,我想告诉用户他们点击了哪个字母.

这是一张图片:

---

代码链

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {

            layout: {
                type: 'vbox'
            },
            items: [{
                html: '<span id="let_a">A</span>  <span id="let_b">B</span> <span style="float:right" id="let_c">C</span>',
                style: 'background-color: #c9c9c9;font-size: 48px;',
                flex: 1
            }]
        });
        Ext.Viewport.add(view);
    }
});

Answer 1

您可以使用委托将侦听器添加到特定元素.它实际上相当简单.

Ext.Viewport.add({
    html: 'test <span class="one">one</span> hmmm <span class="two">two</span>',
    listeners: [
        {
            element: 'element',
            delegate: 'span.one',
            event: 'tap',
            fn: function() {
                console.log('One!');
            }
        },
        {
            element: 'element',
            delegate: 'span.two',
            event: 'tap',
            fn: function() {
                console.log('Two!');
            }
        }
    ]
});

主要部分是element和delegate.

• elementelement除非您使用带有自定义模板的自定义组件,否则几乎在所有情况下都具有该值.
• delegate是一个简单的CSS选择器.因此,它可能是从什么span到span .test.second

理想情况下,正如Thiem所说,你应该尽可能地利用组件.它们将为您提供更多灵活性.但我知道肯定有些情况你需要这样做.不会对性能产生影响; 实际上,它比使用组件更快.但是,您永远不应该按照他的建议实现侦听器.它不会表现出色并且非常脏(正如他所提到的).