在标准浏览器下,给一个链接添加点击事件:
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