Brix — UX

EVENTS

我们可以用 .EVENTS 给 HelloWorld 的 el 节点绑定事件，也可以在 el 节点上代理其子节点的事件：

HelloWorld.EVENTS = {
    "": { // 空表示事件直接绑定在 el 上
        click: function() {
            // 这里的 this 指向当前组件实例，即 new HelloWorld 所返回的值
            top.console.log('节点被点击');
        }
    },
    "#spanName": {
        click: function(e){
            e.halt();   // 阻止冒泡
            this.set('name', "I'm Clicked");
            S.one(e.currentTarget).html(this.get('name'));
        }
    }
};

如果属性为空，则直接绑定到 el 节点上。

其他属性，例如上例中的 #spanName，则作为 KISSY Event 中 .delegate 方法的第二个参数，同时遍历 #spanName 属性所指的对象，将这些事件代理到 el 节点上：

this.get('el').delegate('click', '#spanName', fn);

DOCEVENTS

如果事件需要直接绑定到 document，或者在 document 上代理，则请使用 .DOCEVENTS。

HelloWorld.DOCEVENTS = {
    "": { // 空表示事件直接绑定在document上
        "click": function() {
            top.console.log('document 被点击');
        }
    }
};

它的逻辑与 EVENTS 是一致的，区别只是事件所绑定的节点不同。

事件代理中的当前上下文（this）是当前组件的实例对象

点击组件外层的“点击我”会触发组件绑定在 document 上的事件，点组件内部的“点击我”会触发代理事件。

<div id="container1">
    点击我
    <div id="helloworld1">
        <span>Hello <span id="spanName">点击我</span></span>
    </div>
</div>

KISSY.use('helloworld', function(S, HelloWorld){
    var config = {
        name: 'World',
        tmpl:'#helloworld1'
    }
    var helloworld = new HelloWorld(config);
});

events

如果组件内部提供的代理事件不能满足业务需求，那么，我们提供了一个配置项 events 来满足特殊的需求（当然，我们建议修改组件内部，来满足业务需求），他的写法同 EVENTS 的写法。

紧急情况下，我们可以这么做：

KISSY.use('helloworld', function(S, HelloWorld) {
    var events = {
        "#spanName":{
            click: function(e) {
                top.console.log('我是自定义点击');
            }
        }};
    var config = {
        name: 'World',
        tmpl: '#helloworld1',
        events: events
    };
    var helloworld = new HelloWorld(config);
});

EVENTS：事件绑定机制

EVENTS

DOCEVENTS

events