jquery.jsを読み解く

第9回 jQueryライブラリ (1962行目~2182行目)

この記事を読むのに必要な時間:およそ 8 分

今回も前回に引き続き,イベント処理に関する処理の説明になります。

jQuery.event.trigger()

1962:   trigger: function(type, data, elem, donative, extra) {
1963:     // Clone the incoming data, if any
1964:     data = jQuery.makeArray(data || []);
1965: 

jQuery.event.trigger()メソッドは,イベントを実際に実行する処理です。第1引数typeには,"submit"や"click"などのイベントの種類を指定します。また,第2引数dataには,イベントハンドラに渡すデータを配列として指定します。第3引数elemは,イベントの動作対象となる要素です。第4引数donativeは,後ほど出てきますがブラウザのネイティブなイベント動作を行うかどうかのフラグです。そして,最後にextraが追加で実行する処理を指定します。

1964行では,引数として渡されたdataの複製を作成します。dataが指定されていなければ,空の配列を設定します。

1966:     // Handle a global trigger
1967:     if ( !elem ) {
1968:       // Only trigger if we've ever bound an event for it
1969:       if ( this.global[type] )
1970:         jQuery("*").add([window, document]).trigger(type, data);
1971: 

1967行目からは,第3引数elemが指定されていない場合の処理です。もし,グローバルなイベントが登録されていれば,window.documentに対してtypeイベントを実行します。

1972:     // Handle triggering a single element
1973:     } else {
1974:       // don't do events on text and comment nodes
1975:       if ( elem.nodeType == 3 || elem.nodeType == 8 )
1976:         return undefined;
1977: 
1978:       var val, ret, fn = jQuery.isFunction( elem[ type ] || null ),
1979:         // Check to see if we need to provide a fake event, or not
1980:         event = !data[0] || !data[0].preventDefault;
1981:       
1982:       // Pass along a fake event
1983:       if ( event )
1984:         data.unshift( this.fix({ type: type, target: elem }) );
1985: 
1986:       // Enforce the right trigger type
1987:       data[0].type = type;
1988: 

1975行目は,もうお馴染みの処理となりましたコメントノードとテキストノードの場合には,処理を行わないための条件式です。1978行目は,各変数を初期化しています。fnは引数として指定されたelem[type]が関数オブジェクトかどうかのチェック,eventはdata配列の第1要素にpreventDefaultというプロパティを持っているかどうかを判定しています。このpreventDefaultが指定されていなければ,1984行目にてダミーのイベントを準備します。1987行目は,イベントの種類をdata[0]に格納しています。

1989:       // Trigger the event
1990:       if ( jQuery.isFunction( jQuery.data(elem, "handle") ) )
1991:         val = jQuery.data(elem, "handle").apply( elem, data );
1992: 
1993:       // Handle triggering native .onfoo handlers
1994:       if ( !fn && elem["on"+type] && elem["on"+type].apply( elem, data ) === false )
1995:         val = false;
1996: 

1990行目は,elemに対応するhandleが定義されていて,それが関数であればそれを実行して結果をvalに格納します。1994行目は,先ほどのelem[type]が直接実行できる関数ではない場合に,elem[on~]が実行できればそれを実行します。そして,戻り値がfalseであればvalにfalseを格納します。

1997:       // Extra functions don't get the custom event object
1998:       if ( event )
1999:         data.shift();
2000: 
2001:       // Handle triggering of extra function
2002:       if ( extra && jQuery.isFunction( extra ) ) {
2003:         // call the extra function and tack the current return value on the end for possible inspection
2004:         ret = extra.apply( elem, val == null ? data : data.concat( val ) );
2005:         // if anything is returned, give it precedence and have it overwrite the previous value
2006:         if (ret !== undefined)
2007:           val = ret;
2008:       }
2009: 

ダミーのイベントが登録されていれば,1999行目にてそれを削除します。

2002行目は,追加の関数が指定されている場合にそれを実行します。もし,valがnullならばdataを,あればdataとvalを結合して引数に指定します。そして,その戻り値ををretに格納します。

retにundefined以外の値が格納されていたら,2007行目にてvalにその値をセットしなおします。

2010:       // Trigger the native events (except for clicks on links)
2011:       if ( fn && donative !== false && val !== false && !(jQuery.nodeName(elem, 'a') && type == "click") ) {
2012:         this.triggered = true;
2013:         try {
2014:           elem[ type ]();
2015:         // prevent IE from throwing an error for some hidden elements
2016:         } catch (e) {}
2017:       }
2018: 
2019:       this.triggered = false;
2020:     }
2021: 

2010行目からは,リンクをクリックする以外のブラウザのネイティブなイベントを処理する部分になります。fnが定義済みで,donativeがfalse以外で,valがfalse以外で,aタグ要素のクリックイベント以外の場合に,this.triggeredの値をtrueにしてelem[ type ]()メソッドを実行します。

donativeの値によってネイティブなイベント動作,つまりブラウザのデフォルト動作を行うかどうかを決定しています。これは,jQuery.trigger()メソッドから呼び出された場合にはネイティブなイベントを実行しますが,jQuery.triggerHandler()メソッドから呼び出された場合はdonativeの値がfaleになるため,ブラウザのデフォルト動作は実行されないようになっています。

2022:     return val;
2023:   },
2024: 

最後に2022行目で戻り値としてvalを返して終了です。

著者プロフィール

山下英孝(やましたひでたか)

大学を卒業後,大手SIerに就職し,電機メーカーの研究所勤務を経て,ウノウに入社。1年半に渡ってWebサイトの開発,ディレクション,運用を経験した後に独立。2008年2月よりフリーエンジニアとして活動中。好きな言語はJavaScriptとPythonで,Linuxサーバ運用管理も得意。

ブログWeboo! Returns.

コメント

コメントの記入