在标准浏览器下,给一个链接添加点击事件:


    var a = document.getElementById('someId');
    a.addEventListener('click', function(ev) {
        // do something
    });

拥有 addEventListener 等事件操作方法的对象,有一个统一的名称:Event Target(事件目标对象)。其共同特点是:能触发、添加和删除事件。

DOM 元素节点都是事件目标对象,但我们还经常需要让自定义对象也能触发、添加和删除事件。KISSY.EventTarget 可以让你很容易做到这一点。

Methods

fire fire(type, eventData)

触发自定义事件。

注:该方法的返回值取决于事件监听函数的返回值,一般情况下无返回值。

on void on(type, fn)

添加监听函数。

detach void detach(type, fn)

移除监听函数。

Examples

来看一个简单示例:


var S = KISSY;

// 定义 Dog 类
function Dog(name) {
    this.name = name;
}

// 让 Dog 成为事件目标
S.augment(Dog, S.EventTarget);

// 给 Dog 添加 run 方法
S.augment(Dog, {
   run: function() {
       // 触发 running 事件
       this.fire('running', {speed: '80km/h'});
   }
});

var dog = new Dog('Lady Gogo');

// 添加监听函数
dog.on('running', function(ev) {
    // 注意 ev 的参数传递大使身份
    alert(this.name + ' is running now. Its speed is ' + ev.speed);
});

// 让可爱的小狗跑起来吧
dog.run();

为了让学习效果最佳,就不提供示范页面了。建议将上面的代码手工输入运行一遍,不要偷懒^o^

有兴趣的可以进一步阅读 event-target.js 源码。
不要怀疑代码为何如此简单,世界本就应该简单,不是吗?

或许你已开始部分认可“只要你能想到,它基本上就能做到”。
倘若还没感觉,请继续阅读 event-mouseenter

homeevent › event-target :

Methods