当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播

我来了!

拥有积分:4038
尚学堂雄起!!威武。。。

博客分类

笔记中心

课题中心

提问中心

答题中心

解答题中心

javascript事件之:jQuery事件接口概述

我来了! 发表于 2年前 (2014-12-11 23:34:05)  |  评论(0)  |  阅读次数(349)| 0 人收藏此文章,   我要收藏   

  事件的操作,在JavaScript是非常频繁的。然而原生javaScript的事件API让新手感觉非常不友好,再加上事件依赖于DOM,而原生javaScript对DOM的选择又是三板斧的功力。由此催生出以jQuery为领头羊的对原生js事件操作的兼容性处理,API优化以及一些功能的拓展。

  现在,以jQuery2.0.3为例,我们来看看jQuery的事件接口。

  首先来看拓展到jQuery.prototype下的实例方法:

//5049 - 5150
1 jQuery.fn.extend({
2     on: function( types, selector, data, fn, /*INTERNAL*/ one ) { ... },
3     one: function( types, selector, data, fn ) { ... },
4     off: function( types, selector, fn ) { ... }),
5     trigger: function( type, data ) { ... },
6     triggerHandler: function( type, data ) { ... }
7 })
//6742-6773
//提供的一些便捷方法
 1 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
 2     "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
 3     "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
 4 
 5     // Handle event binding
 6     jQuery.fn[ name ] = function( data, fn ) {
 7         return arguments.length > 0 ?
 8             this.on( name, null, data, fn ) :
 9             this.trigger( name );
10     };
11 });
12 jQuery.fn.extend({
13     hover: function( fnOver, fnOut ) { ... },
14     bind: function( types, data, fn ) { ... },
15     unbind: function( types, fn ) { ... },
16     delegate: function( selector, types, data, fn ) { ... },
17     undelegate: function( selector, types, fn ) { ... }
18 })

jQuer写法的多样性在这里可窥见一二。

这里的方法除了triggerHandler每一个在实际开发中都比较常用。

triggerHandler的用法如下:

js代码:

$("#inputTxt").on("focus", function(){
    console.log("获得焦点")
})
$("#triggerHandler").on("click", function(){
    $("#inputTxt").triggerHandler("focus")
})
$("#trigger").on("click", function(){
    $("#inputTxt").trigger("focus")
})

html代码:

<input id="inputTxt" type="text" name="" id="" />
<input id="trigger" type="button" value="trigger触发"/>
<input id="triggerHandler" type="button" value="triggerHandler触发"/>

当点击”trigger触发“按钮,触发text输入框的自定义focus事件和默认的focus事件

而点击“triggerHandler触发”按钮,仅仅触发自定义focus事件,默认事件被阻止了。

事实上,triggerHandler不仅能够阻止默认事件,还能阻止冒泡事件。

 

以上的接口就是jQuery对外的实例接口。可是我们知道,jQuery的实例方法基本上都是一层表皮,其真正的实现更多是靠jQuery拓展方法。

拓展方法

 1 jQuery.event = {
 2     global: {},
 3     add: function( elem, types, handler, data, selector ) {},
 4     remove: function( elem, types, handler, selector, mappedTypes ) {},
 5     trigger: function( event, data, elem, onlyHandlers ) {},
 6     dispatch: function( event ) {},
 7     handlers: function( event, handlers ) {},
 8     props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
 9     fixHooks: {},
10     keyHooks: {
11         props: "char charCode key keyCode".split(" "),
12         filter: function( event, original ) {}
13     },
14     mouseHooks: {
15         props: "button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
16         filter: function( event, original ) {}
17     },
18     fix: function( event ) {},
19     special: {},
20     simulate: function( type, elem, event, bubble ) {}
21 }
22 jQuery.Event = function( src, props ) {}
23 jQuery.Event.prototype = {
24     isDefaultPrevented: returnFalse,
25     isPropagationStopped: returnFalse,
26     isImmediatePropagationStopped: returnFalse,
27     preventDefault: function() {},
28     stopPropagation: function() {},
29     stopImmediatePropagation: function() {}
30 }

最后是一些兼容性处理

 1 jQuery.each({
 2     mouseenter: "mouseover",
 3     mouseleave: "mouseout"
 4 }, function( orig, fix ) {
 5     jQuery.event.special[ orig ] = {
 6         delegateType: fix,
 7         bindType: fix,
 8         handle: function( event ) {
 9             ...
10         }
11     };
12 });
13 
14 if ( !jQuery.support.focusinBubbles ) {
15     jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
16             handler = function( event ) {
17                 jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );
18             };
19         jQuery.event.special[ fix ] = {
20             setup: function() {
21                 ...
22             },
23             teardown: function() {
24                 ...
25             }    
26         };
27     });
28 }

好了,下一回我们实例方法下的这些接口如何与jQuery.event,jQuery.Event协同工作。

 

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183