[jQuery] 如何将行为和自定义事件解耦
当你的代码库增长到一定的规模,就需要考虑将行为和自定义事件进行解耦。首先我们了解下自定义事件的概念。
根据你使用的框架不同,自定义事件的行为在某些方面会有所差异。
- 类似DOM的行为:你在DOM节点(包括document对象)监听并触发自定义事件。这些事件既可以冒泡,也可以被拦截。这正是Prototype、jQuery和MooTools所做的。如果事件不能扩散,就必须在触发事件的对象上进行监听。
- 命名空间:一些框架需要你为你的事件指定命名空间,通常使用一个点号前缀来把你的事件和原生事件区分开。
- 自定义额外数据:JavaScript框架允许你在触发自定义事件时,向事件处理器传送额外的数据。jQuery可以向事件处理器传递任意数量的额外参数。
- 通用事件API:只用Dojo保留了操作原生DOM事件的正常API。而操作自定义事件需要特殊的发布/订阅API。这也意味着Dojo中的自定义事件不具有DOM事件的一些行为(比如冒泡)。
- 声明:我们往往需要在预定义的事件中加入一些特殊的变化(例如,需要Alt键按下才能触发的单击事件),MooTools运行你定义此类自定义事件。此类事件需要预先声明,即便你只是声明他们的名字。任何未声明的自定义事件不会被触发。
jQuery框架中如何使用事件
- 使用bind方法监听自定义事件
var method1 = function() {
alert('method1');
};
var method2 = function() {
alert('method2');
};
var method3 = function() {
alert('method3');
};
$('div.test').bind('event', method1);
$('div.test').bind('event', method2);
$('div.test').bind('event', method3);
alert('method1');
};
var method2 = function() {
alert('method2');
};
var method3 = function() {
alert('method3');
};
$('div.test').bind('event', method1);
$('div.test').bind('event', method2);
$('div.test').bind('event', method3);
- 使用unbind方法取消监听自定义事件
$('div.test').unbind('event', method2);
- 使用trigger方法触发一个自定义事件
$('div.test').trigger('event');
jQuery对事件处理的高级应用
View Code