首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery.event自定义事件机制-jQuery.event.special实例

2013-08-24 
jQuery.event自定义事件机制-jQuery.event.special范例什么时候要用到自定义函数?有些浏览器并不兼容某类

jQuery.event自定义事件机制-jQuery.event.special范例

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

原理
jQuery(elem).bind(type, callbakc)实际上是映射到? ?? ???}
}



卸载处理器:

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



入口

jQuery.event.special[youEvent] = {
? ?? ???/**
? ?? ?? ?* 初始化事件处理器 - this指向元素
? ?? ?? ?* @param 附加的数据
? ?? ?? ?* @param 事件类型命名空间
? ?? ?? ?* @param 回调函数
? ?? ?? ?*/
? ?? ???setup: function (data, namespaces, eventHandle) {
? ?? ???},
? ?? ???/**
? ?? ?? ?* 卸载事件处理器 - this指向元素
? ?? ?? ?* @param 事件类型命名空间
? ?? ?? ?*/
? ?? ???teardown: function (namespaces) {
? ?? ???}
};



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

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

范例

/*
* jQuery input event
* Author: tangbin
* Blog:?http://www.planeart.cn
* Date: 2011-08-18 15:15
*/
(function ($) {

// IE6\7\8不支持input事件,但支持propertychange事件
if ('onpropertychange' in document) {
? ?? ???// 检查是否为可输入元素
? ?? ???var rinput = /^INPUT|TEXTAREA$/,
? ?? ?? ?? ?? ? isInput = function (elem) {
? ?? ?? ?? ?? ?? ?? ?? ?return rinput.test(elem.nodeName);
? ?? ?? ?? ?? ? };
? ?? ?? ?? ?? ??
? ?? ???$.event.special.input = {
? ?? ?? ?? ?? ? setup: function () {
? ?? ?? ?? ?? ?? ?? ?? ?var elem = this;
? ?? ?? ?? ?? ?? ?? ?? ?if (!isInput(elem)) return false;
? ?? ?? ?? ?? ?? ?? ?? ?
? ?? ?? ?? ?? ?? ?? ?? ?$.data(elem, '@oldValue', elem.value);
? ?? ?? ?? ?? ?? ?? ?? ?$.event.add(elem, 'propertychange', function (event) {
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???// 元素属性任何变化都会触发propertychange事件
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???// 需要屏蔽掉非value的改变,以便接近标准的onput事件
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???if ($.data(this, '@oldValue') !== this.value) {
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? $.event.trigger('input', null, this);
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???};
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???$.data(this, '@oldValue', this.value);
? ?? ?? ?? ?? ?? ?? ?? ?});
? ?? ?? ?? ?? ? },
? ?? ?? ?? ?? ? teardown: function () {
? ?? ?? ?? ?? ?? ?? ?? ?var elem = this;
? ?? ?? ?? ?? ?? ?? ?? ?if (!isInput(elem)) return false;
? ?? ?? ?? ?? ?? ?? ?? ?$.event.remove(elem, 'propertychange');
? ?? ?? ?? ?? ?? ?? ?? ?$.removeData(elem, '@oldValue');
? ?? ?? ?? ?? ? }
? ?? ???};
};

// 声明快捷方式:$(elem).input(function () {});
$.fn.input = function (callback) {
? ?? ???return this.bind('input', callback);
};

})(jQuery);



调用:

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


?

热点排行