什么时候要用到自定义函数?有些浏览器并不兼容某类型的事件,如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源码:
初始化处事件处理器
// Check for a special event handler
// Only use addEventListener/attachEvent if the special
// events handler returns false
if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
// Bind the global event handler to the element
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, eventHandle );
}
}
卸载处理器:
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 () {});
相关推荐
jquery.i18n.properties-min-1.0.9 主要用于国际化和读取properties文件
jquery.i18n.properties-1.0.9.js 下载
jquery.i18n.properties-min-1.0.9.js前端国际化文件 jquery插件,实现国际化
jquery i18n 1.0.9版本的库,希望对大家有帮助。
jquery.js jquery.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.10.2.min.js 集合
jquery-ui中文日历控件,使用的时候记得先把文档编码改为UTF-8,否则中文显示乱码!
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
jquery.qrcode.min.js 二维码的jquery插件
jquery.event.drag-2.0.rar
开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...
jquery-1.4.2.js jquery-1.4.2.min.js jquery-1.4.2-vsdoc.js 中文版vsdoc jquery-1.4.2-vsdoc_en.js jquery.cookie.js
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
jquery.i18n.properties-min-1.0.9.js前端国际化文件,项目中用到的前端国际化文件。 $.i18n.properties( { name : 'web_i18n', // Resource name path : '/resources/i18n/', //Resource path cache : true, ...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
现在的版本还是很多年前的 jquery.i18n.properties-1.0.9,现在最新的是1.2.2,很好用 jQuery.i18n.properties的API只有几个:jQuery.i18n.properties()、jQuery.i18n.prop()、jQuery.i18n.browserLang(),当然也...
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery-1.4.2.js jquery-1.4.2.min.js jquery-1.5.min.js jquery-1.6.2.js jquery-1.6.2.min.js jquery-1.7.1.js jquery-1.7.1.min.js jquery-1.7.2.min.js jquery-1.8.2.min.js jquery-1.9.1.min.js jquery-1.10.1....