今回もイベントの処理に関する部分の解説になります。$(document).ready()を実装している部分が出てきますが、
それでは、
jQuery.fn.bind()
2183: jQuery.fn.extend({
2184: bind: function( type, data, fn ) {
2185: return type == "unload" ? this.one(type, data, fn) : this.each(function(){
2186: jQuery.event.add( this, type, fn || data, fn && data );
2187: });
2188: },
2189: jQuery.
2185行目で、
jQuery.fn.one()
2190: one: function( type, data, fn ) {
2191: return this.each(function(){
2192: jQuery.event.add( this, type, function(event) {
2193: jQuery(this).unbind(event);
2194: return (fn || data).apply( this, arguments);
2195: }, fn && data);
2196: });
2197: },
2198: jQuery.
2192行目でjQuery.
jQuery.fn.unbind()
2199: unbind: function( type, fn ) {
2200: return this.each(function(){
2201: jQuery.event.remove( this, type, fn );
2202: });
2203: },
2204: jQuery.
jQuery.fn.trigger()
2205: trigger: function( type, data, fn ) {
2206: return this.each(function(){
2207: jQuery.event.trigger( type, data, this, true, fn );
2208: });
2209: },
2210: jQuery.
jQuery.fn.triggerHandler()
2211: triggerHandler: function( type, data, fn ) {
2212: if ( this[0] )
2213: return jQuery.event.trigger( type, data, this[0], false, fn );
2214: return undefined;
2215: },
2216: jQuery.
jQuery.fn.toggle()
2217: toggle: function() {
2218: // Save reference to arguments for access in closure
2219: var args = arguments;
2220:
2221: return this.click(function(event) {
2222: // Figure out which function to execute
2223: this.lastToggle = 0 == this.lastToggle ? 1 : 0;
2224:
2225: // Make sure that clicks stop
2226: event.preventDefault();
2227:
2228: // and execute the function
2229: return args[this.lastToggle].apply( this, arguments ) || false;
2230: });
2231: },
2232: jQuery.
2223行目は、
2229行目は、
jQuery.fn.hover()
2233: hover: function(fnOver, fnOut) {
2234: return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut);
2235: },
2236: jQuery.
jQuery.fn.ready()
2237: ready: function(fn) {
2238: // Attach the listeners
2239: bindReady();
2240:
2241: // If the DOM is already ready
2242: if ( jQuery.isReady )
2243: // Execute the function immediately
2244: fn.call( document, jQuery );
2245:
2246: // Otherwise, remember the function for later
2247: else
2248: // Add the function to the wait list
2249: jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
2250:
2251: return this;
2252: }
2253: });
2254: jQuery.
まず、
2242行目は、
jQuery.ready()
2255: jQuery.extend({
2256: isReady: false,
2257: readyList: [],
2258: // Handle when the DOM is ready
2259: ready: function() {
2260: // Make sure that the DOM is not already loaded
2261: if ( !jQuery.isReady ) {
2262: // Remember that the DOM is ready
2263: jQuery.isReady = true;
2264:
2265: // If there are functions bound, to execute
2266: if ( jQuery.readyList ) {
2267: // Execute all of them
2268: jQuery.each( jQuery.readyList, function(){
2269: this.apply( document );
2270: });
2271:
2272: // Reset the list of functions
2273: jQuery.readyList = null;
2274: }
2275:
2276: // Trigger any bound ready events
2277: jQuery(document).triggerHandler("ready");
2278: }
2279: }
2280: });
2281: 2256行目のisReadyは、
2257行目のreadyListには、
2259行目のjQuery.
最後に2277行目で、
bindReady()
2282: var readyBound = false;
2283:
2284: function bindReady(){
2285: if ( readyBound ) return;
2286: readyBound = true;
2287:
2288: // Mozilla, Opera (see further below for it) and webkit nightlies currently support this event
2289: if ( document.addEventListener && !jQuery.browser.opera)
2290: // Use the handy event callback
2291: document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
2292:
2293: // If IE is used and is not in a frame
2294: // Continually check to see if the document is ready
2295: if ( jQuery.browser.msie && window == top ) (function(){
2296: if (jQuery.isReady) return;
2297: try {
2298: // If IE is used, use the trick by Diego Perini
2299: // http://javascript.nwbox.com/IEContentLoaded/
2300: document.documentElement.doScroll("left");
2301: } catch( error ) {
2302: setTimeout( arguments.callee, 0 );
2303: return;
2304: }
2305: // and execute any waiting functions
2306: jQuery.ready();
2307: })();
2308:
2309: if ( jQuery.browser.opera )
2310: document.addEventListener( "DOMContentLoaded", function () {
2311: if (jQuery.isReady) return;
2312: for (var i = 0; i 2313: if (document.styleSheets[i].disabled) {
2314: setTimeout( arguments.callee, 0 );
2315: return;
2316: }
2317: // and execute any waiting functions
2318: jQuery.ready();
2319: }, false);
2320:
2321: if ( jQuery.browser.safari ) {
2322: var numStyles;
2323: (function(){
2324: if (jQuery.isReady) return;
2325: if ( document.readyState != "loaded" && document.readyState != "complete" ) {
2326: setTimeout( arguments.callee, 0 );
2327: return;
2328: }
2329: if ( numStyles === undefined )
2330: numStyles = jQuery("style, link[rel=stylesheet]").length;
2331: if ( document.styleSheets.length != numStyles ) {
2332: setTimeout( arguments.callee, 0 );
2333: return;
2334: }
2335: // and execute any waiting functions
2336: jQuery.ready();
2337: })();
2338: }
2339:
2340: // A fallback to window.onload, that will always work
2341: jQuery.event.add( window, "load", jQuery.ready );
2342: }
2343: bindReady()メソッドは、
2289～2291行目は、
2295～2307行目は、
2309～2319行目は、
2321～2338行目は、
これまでのどのブラウザにも当てはまらなかった場合は、
各種イベントメソッドの登録
2344: jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
2345: "mousedown,mouseup,mousemove,mouseover,mouseout,change,select," +
2346: "submit,keydown,keypress,keyup,error").split(","), function(i, name){
2347:
2348: // Handle event binding
2349: jQuery.fn[name] = function(fn){
2350: return fn ? this.bind(name, fn) : this.trigger(name);
2351: };
2352: });
2353: 2344行目からは、
withinElement()
2354: // Checks if an event happened on an element within another element
2355: // Used in jQuery.event.special.mouseenter and mouseleave handlers
2356: var withinElement = function(event, elem) {
2357: // Check if mouse(over|out) are still within the same parent element
2358: var parent = event.relatedTarget;
2359: // Traverse up the tree
2360: while ( parent && parent != elem ) try { parent = parent.parentNode; } catch(error) { parent = elem; }
2361: // Return true if we actually just moused on to a sub-element
2362: return parent == elem;
2363: };
2364: 2356行目からは、