jQuery源码分析之blur focus focusin focusout load resize scroll unload click dblclick等方法
2015-10-17 14:30
681 查看
blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu源码如下:
注意:从上面的代码可以知道,给on函数传递的第二个参数是null,也就是这些方法的API不能传递selector进行代理!
hover方法源码:
总结:这些函数接受两个参数,一个是额外数据一个是回调函数。如果不传入参数,那么就是触发调用对象的所有的同类型方法,否则就是为调用对象添加事件!注意on方法底层调用的是jQuery.event.add方法!如果是添加函数那么调用时候可以获取到添加事件的所有属性!参见点击打开链接
(1)回调函数中this指向当前元素!,也就是currentTarget。apply( matched.elem, args )是在dispatch里面的源码,但是因为这里用的是apply而不是call,所以直接把args逐个封装到回调函数中。这个args只有一个参数args[0]=event所以这里回调函数中唯一一个参数就是event,同时可以通过event.data获取数据,通过delegateTarget获取代理对象BODY。通过handleObj可以获取通过add方法添加的事件的所有信息,也就是通过add方法里面添加的handleObj所有属性!同时可以通过currentTarget获取当前所在的元素!总之一句话:在该回调函数中可以获取这个调用事件的所有的信息!
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { // Handle event binding jQuery.fn[ name ] = function( data, fn ) { return arguments.length > 0 ? this.on( name, null, data, fn ) ://如果调用时候传入的只有一个函数,那么data就是这个函数,在on方法里对他进行调整! this.trigger( name ); }; });
注意:从上面的代码可以知道,给on函数传递的第二个参数是null,也就是这些方法的API不能传递selector进行代理!
hover方法源码:
hover: function( fnOver, fnOut ) { return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); }
总结:这些函数接受两个参数,一个是额外数据一个是回调函数。如果不传入参数,那么就是触发调用对象的所有的同类型方法,否则就是为调用对象添加事件!注意on方法底层调用的是jQuery.event.add方法!如果是添加函数那么调用时候可以获取到添加事件的所有属性!参见点击打开链接
(1)回调函数中this指向当前元素!,也就是currentTarget。apply( matched.elem, args )是在dispatch里面的源码,但是因为这里用的是apply而不是call,所以直接把args逐个封装到回调函数中。这个args只有一个参数args[0]=event所以这里回调函数中唯一一个参数就是event,同时可以通过event.data获取数据,通过delegateTarget获取代理对象BODY。通过handleObj可以获取通过add方法添加的事件的所有信息,也就是通过add方法里面添加的handleObj所有属性!同时可以通过currentTarget获取当前所在的元素!总之一句话:在该回调函数中可以获取这个调用事件的所有的信息!
相关文章推荐
- jQuery源码分析之从off方法看unbind,undelegate方法
- jQuery页面加载方法
- jQuery源码分析之从on方法看bind,delegate,live,one方法一问
- jQuery第三课 ——元素尺寸、滚动距离、元素距离、jq事件、event对象
- JQuery AJAX调用WEB SERVICE方法
- jquery简单动画效果(下)
- 解密jQuery事件核心 - 委托设计(二)
- jQuery对下拉框Select操作总结
- jQuery.extend 函数详解
- jQuery源码分析之jQuery.event.remove方法
- jQuery第二课 ——节点选择、元素创建与操作、包装对象、jq转原生js
- jquery-qrcode生成二维码
- 夺命雷公狗jquery-----1选择标签的三种方法
- 手风琴效果
- jQuery LigerUI 使用教程入门篇
- jQuery第一课 ——属性、节点选择
- jquery 选择器写法
- jQuery实现有动画淡出效果的二级折叠菜单代码
- jquery判断checkbox是否选中
- jQuery插件——x-editable表单字段实时编辑)--select2