jQuery技术

jQuery源码学习(版本1.11)

字号+ 作者:H5之家 来源:H5之家 2017-05-18 09:00 我要评论( )

jQuery源码学习(版本1.11)-事件处理-实例函数,有需要的朋友可以参考下。 概述本文详细分析jquery-1.11.1.js源码文件行数:568~5269;代码简介:JQ原型jQuery.

jQuery源码学习(版本1.11)-事件处理-实例函数,有需要的朋友可以参考下。


概述本文详细分析jquery-1.11.1.js源码文件行数:568~5269;代码简介:JQ原型jQuery.fn利用extend扩展了事件处理的方法on-增加事件监听,off-移除事件监听,trigger-触发事件等可有JQ对象实例调用的方法,这些方法会用each对JQ对象实例里的每一个节点都执行相对应的工具方法,即JQ对象实例的事件处理,是作用于内部所有原生dom节点的;下文进行详细代码分析。
事件处理的实例方法// 实例对象的事件处理方法jQuery.fn.extend({ // 绑定事件方法on(参数one仅限是内部使用,JQ实例对象需要的话可以直接调用后面的one方法) on: function( types, selector, data, fn, /*INTERNAL*/ one ) { var type, origFn; // 支持types传入一个map,里面保存types/handlers的场景 if ( typeof types === "object" ) { // selector不为string的场景( types-Object, selector, data ) if ( typeof selector !== "string" ) { // 重定义data,假设data为空,则data = selector,( types-Object, data ) data = data || selector; // 置空selector selector = undefined; } // 遍历对象里的事件类型,逐一调用on for ( type in types ) { this.on( type, selector, data, types[ type ], one ); } return this; } // data跟fn同时为空的场景 if ( data == null && fn == null ) { // ( types, fn ) fn = selector; data = selector = undefined; } else if ( fn == null ) { if ( typeof selector === "string" ) { // ( types, selector, fn ) fn = data; data = undefined; } else { // ( types, data, fn ) fn = data; data = selector; selector = undefined; } } if ( fn === false ) { fn = returnFalse; } else if ( !fn ) { return this; } // 传入了one的场景 if ( one === 1 ) { // 先引用原回调 origFn = fn; // 定义新回调,封装原回调 fn = function( event ) { // 去除绑定 jQuery().off( event ); // 执行回调 return origFn.apply( this, arguments ); }; // 从之前分析的jQuery.event代码可知,回调里面保存guid,删除的时候用于会判断,这样才知道解除绑定的是不是同一个回调函数 fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ ); } // 以上各种选择判断分支,均是对不同入参场景进行分类处理 // 最终还是调用each方法,对JQ对象里的每一个元素,执行jQuery.event.add增加绑定事件 return this.each( function() { jQuery.event.add( this, types, fn, data, selector ); }); }, // one方法,表明事件回调只处理一次 one: function( types, selector, data, fn ) { return this.on( types, selector, data, fn, 1 ); }, // 解除事件绑定off off: function( types, selector, fn ) { var handleObj, type; if ( types && types.preventDefault && types.handleObj ) { // ( event ) dispatched jQuery.Event handleObj = types.handleObj; jQuery( types.delegateTarget ).off( handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType, handleObj.selector, handleObj.handler ); return this; } if ( typeof types === "object" ) { // ( types-object [, selector] ) for ( type in types ) { this.off( type, selector, types[ type ] ); } return this; } if ( selector === false || typeof selector === "function" ) { // ( types [, fn] ) fn = selector; selector = undefined; } if ( fn === false ) { fn = returnFalse; } // 前面也是兼容各种入参的场景 // 最终同样是使用each对JQ对象每个元素调用jQuery.event.remove解除绑定 return this.each(function() { jQuery.event.remove( this, types, fn, selector ); }); }, // 触发事件方法trigger trigger: function( type, data ) { // 直接使用each方法调用jQuery.event.trigger return this.each(function() { jQuery.event.trigger( type, data, this ); }); }, // 会影响到前面event.isTrigger的值,用途暂时不明 triggerHandler: function( type, data ) { var elem = this[0]; if ( elem ) { return jQuery.event.trigger( type, data, elem, true ); } }});

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery源码学习笔记(1) 自运行匿名函数

    jQuery源码学习笔记(1) 自运行匿名函数

    2017-05-17 12:03

  • jQuery File Upload done函数没有返回

    jQuery File Upload done函数没有返回

    2017-05-11 14:06

  • jQuery 位置函数实例教程

    jQuery 位置函数实例教程

    2017-05-10 08:00

  • jQuery 实例:标签切换

    jQuery 实例:标签切换

    2017-05-05 08:06

网友点评
u