jQuery.event自定义事件机制

什么时候要用到自定义函数？有些浏览器并不兼容某类型的事件，如IE6～8不支持hashchange事件，你无法通过jQuery(window).bind('hashchange', callback)来绑定这个事件，这个时候你就可以通过jQuery自定义事件接口来模拟这个事件，做到跨浏览器兼容。

原理

jQuery(elem).bind(type, callbakc)实际上是映射到 jQuery.event.add(elem, types, handler, data)这个方法，每一个类型的事件会初始化一次事件处理器，而传入的回调函数会以数组的方式缓存起来，当事件触发的时候处理器将依次执行这个数组。

jQuery.event.add方法在第一次初始化处理器的时候会检查是否为自定义事件，如果存在则将会把控制权限交给自定义事件的事件初始化函数，同样事件卸载的jQuery.event.remove方法在删除处理器前也会检查此。

如jQuery源码：

初始化处事件处理器

[javascript] view plain copy

print?

1. // Check for a special event handler  
2. // Only use addEventListener/attachEvent if the special  
3. // events handler returns false  
4. if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {  
5.         // Bind the global event handler to the element  
6.         if ( elem.addEventListener ) {  
7.                 elem.addEventListener( type, eventHandle, false );  
8.   
9.         } else if ( elem.attachEvent ) {  
10.                 elem.attachEvent( "on" + type, eventHandle );  
11.         }  
12. }  

卸载处理器：

[javascript] view plain copy

print?

1. if ( !special.teardown || special.teardown.call( elem, namespaces ) === false ) {  
2.         jQuery.removeEvent( elem, type, elemData.handle );  
3. }  

入口

[javascript] view plain copy

print?

1. <pre name="code" class="javascript">jQuery.event.special[youEvent] = {  
2.         /** 
3.          * 初始化事件处理器 - this指向元素 
4.          * @param 附加的数据 
5.          * @param 事件类型命名空间 
6.          * @param 回调函数 
7.          */  
8.         setup: function (data, namespaces, eventHandle) {  
9.         },  
10.         /** 
11.          * 卸载事件处理器 - this指向元素 
12.          * @param 事件类型命名空间 
13.          */  
14.         teardown: function (namespaces) {  
15.         }  
16. };  

事实上jQuery自定义事件那些接收的参数有点鸡肋，需要hack与能hack的事件就那么一点点，且限制颇多，一般情况下很少使用到。

接下来我们做一个最简单的自定义插件，给jQuery提供input跨浏览器事件支持。input事件不同于keydown与keyup，它不依赖键盘响应，只要值改变都会触发input事件，比如粘贴文字、使用在线软键盘等。

范例

[javascript] view plain copy

print?

1. /* 
2. * jQuery input event 
3. * Author: tangbin 
4. * Blog: http://www.planeart.cn 
5. * Date: 2011-08-18 15:15 
6. */  
7. (function ($) {  
8.   
9. // IE6\7\8不支持input事件，但支持propertychange事件  
10. if ('onpropertychange' in document) {  
11.         // 检查是否为可输入元素  
12.         var rinput = /^INPUT|TEXTAREA$/,  
13.                 isInput = function (elem) {  
14.                         return rinput.test(elem.nodeName);  
15.                 };  
16.                   
17.         $.event.special.input = {  
18.                 setup: function () {  
19.                         var elem = this;  
20.                         if (!isInput(elem)) return false;  
21.                           
22.                         $.data(elem, '@oldValue', elem.value);  
23.                         $.event.add(elem, 'propertychange', function (event) {  
24.                                 // 元素属性任何变化都会触发propertychange事件  
25.                                 // 需要屏蔽掉非value的改变，以便接近标准的onput事件  
26.                                 if ($.data(this, '@oldValue') !== this.value) {  
27.                                         $.event.trigger('input', null, this);  
28.                                 };  
29.                                   
30.                                 $.data(this, '@oldValue', this.value);  
31.                         });  
32.                 },  
33.                 teardown: function () {  
34.                         var elem = this;  
35.                         if (!isInput(elem)) return false;  
36.                         $.event.remove(elem, 'propertychange');  
37.                         $.removeData(elem, '@oldValue');  
38.                 }  
39.         };  
40. };  
41.   
42. // 声明快捷方式：$(elem).input(function () {});  
43. $.fn.input = function (callback) {  
44.         return this.bind('input', callback);  
45. };  
46.   
47. })(jQuery);  

调用：

[javascript] view plain copy

print?

1. jQuery(elem).bind('input', function () {});