X-Git-Url: http://git.asbjorn.biz/?p=jquery.git;a=blobdiff_plain;f=src%2Fevent%2Fevent.js;h=bb5f9d273dc345f3e2ac9451e15829178ab1bec1;hp=4a6331670652f0b52cb698bff6aadefcfaf3fa85;hb=2ef4093cf7f52383dd43bd361864edcda27e5c3c;hpb=028f9d859dfed30e45046f28f5fec12cf6e7b2bf diff --git a/src/event/event.js b/src/event/event.js index 4a63316..bb5f9d2 100644 --- a/src/event/event.js +++ b/src/event/event.js @@ -12,42 +12,67 @@ jQuery.event = { // around, causing it to be cloned in the process if ( jQuery.browser.msie && element.setInterval != undefined ) element = window; - - // if data is passed, bind to handler - if( data ) - handler.data = data; - + // Make sure that the function being executed has a unique ID if ( !handler.guid ) handler.guid = this.guid++; + + // if data is passed, bind to handler + if( data != undefined ) { + // Create temporary function pointer to original handler + var fn = handler; + + // Create unique handler function, wrapped around original handler + handler = function() { + // Pass arguments and context to original handler + return fn.apply(this, arguments); + }; + + // Store data in unique handler + handler.data = data; + + // Set the guid of unique handler to the same of original handler, so it can be removed + handler.guid = fn.guid; + } // Init the element's event structure - if (!element.events) - element.events = {}; + if (!element.$events) + element.$events = {}; + + if (!element.$handle) + element.$handle = function() { + // returned undefined or false + var val; + + // Handle the second event of a trigger and when + // an event is called after a page has unloaded + if ( typeof jQuery == "undefined" || jQuery.event.triggered ) + return val; + + val = jQuery.event.handle.apply(element, arguments); + + return val; + }; // Get the current list of functions bound to this event - var handlers = element.events[type]; + var handlers = element.$events[type]; - // If it hasn't been initialized yet + // Init the event handler queue if (!handlers) { - // Init the event handler queue - handlers = element.events[type] = {}; - - // Remember an existing handler, if it's already there - if (element["on" + type]) - handlers[0] = element["on" + type]; + handlers = element.$events[type] = {}; + + // And bind the global event handler to the element + if (element.addEventListener) + element.addEventListener(type, element.$handle, false); + else + element.attachEvent("on" + type, element.$handle); } // Add the function to the element's handler list handlers[handler.guid] = handler; - // And bind the global event handler to the element - element["on" + type] = this.handle; - - // Remember the function in a global list (for triggering) - if (!this.global[type]) - this.global[type] = []; - this.global[type].push( element ); + // Keep track of which events have been used, for global triggering + this.global[type] = true; }, guid: 1, @@ -55,57 +80,88 @@ jQuery.event = { // Detach an event or set of events from an element remove: function(element, type, handler) { - if (element.events) - if ( type && type.type ) - delete element.events[ type.type ][ type.handler.guid ]; - else if (type && element.events[type]) + var events = element.$events, ret, index; + + if ( events ) { + // type is actually an event object here + if ( type && type.type ) { + handler = type.handler; + type = type.type; + } + + if ( !type ) { + for ( type in events ) + this.remove( element, type ); + + } else if ( events[type] ) { + // remove the given handler for the given type if ( handler ) - delete element.events[type][handler.guid]; + delete events[type][handler.guid]; + + // remove all handlers for the given type else - for ( var i in element.events[type] ) - delete element.events[type][i]; - else - for ( var j in element.events ) - this.remove( element, j ); + for ( handler in element.$events[type] ) + delete events[type][handler]; + + // remove generic event handler if no more handlers exist + for ( ret in events[type] ) break; + if ( !ret ) { + if (element.removeEventListener) + element.removeEventListener(type, element.$handle, false); + else + element.detachEvent("on" + type, element.$handle); + ret = null; + delete events[type]; + } + } + + // Remove the expando if it's no longer used + for ( ret in events ) break; + if ( !ret ) + element.$handle = element.$events = null; + } }, - trigger: function(type,data,element) { + trigger: function(type, data, element) { // Clone the incoming data, if any data = jQuery.makeArray(data || []); // Handle a global trigger if ( !element ) { - var g = this.global[type]; - if ( g ) - for ( var i = 0, gl = g.length; i < gl; i++ ) - this.trigger( type, data, g[i] ); + // Only trigger if we've ever bound an event for it + if ( this.global[type] ) + jQuery("*").trigger(type, data); // Handle triggering a single element - } else if ( element["on" + type] ) { - if ( element[ type ] && element[ type ].constructor == Function ) + } else { + var val, ret, fn = jQuery.isFunction( element[ type ] || null ); + + // Pass along a fake event + data.unshift( this.fix({ type: type, target: element }) ); + + // Trigger the event + if ( jQuery.isFunction( element.$handle ) ) + val = element.$handle.apply( element, data ); + if ( !fn && element["on"+type] && element["on"+type].apply( element, data ) === false ) + val = false; + + if ( fn && val !== false && !(jQuery.nodeName(element, 'a') && type == "click") ) { + this.triggered = true; element[ type ](); - else { - // Pass along a fake event - data.unshift( this.fix({ type: type, target: element }) ); - - // Trigger the event - element["on" + type].apply( element, data ); } + + this.triggered = false; } }, handle: function(event) { - if ( typeof jQuery == "undefined" ) return false; + // returned undefined or false + var val; // Empty object is for triggered events with no data event = jQuery.event.fix( event || window.event || {} ); - // returned undefined or false - var returnValue; - - var c = this.events[event.type]; - - var args = [].slice.call( arguments, 1 ); + var c = this.$events && this.$events[event.type], args = [].slice.call( arguments, 1 ); args.unshift( event ); for ( var j in c ) { @@ -117,58 +173,72 @@ jQuery.event = { if ( c[j].apply( this, args ) === false ) { event.preventDefault(); event.stopPropagation(); - returnValue = false; + val = false; } } // Clean up added properties in IE to prevent memory leak - if (jQuery.browser.msie) event.target = event.preventDefault = event.stopPropagation = event.handler = event.data = null; + if (jQuery.browser.msie) + event.target = event.preventDefault = event.stopPropagation = + event.handler = event.data = null; - return returnValue; + return val; }, fix: function(event) { + // store a copy of the original event object + // and clone to set read-only properties + var originalEvent = event; + event = jQuery.extend({}, originalEvent); + + // add preventDefault and stopPropagation since + // they will not work on the clone + event.preventDefault = function() { + // if preventDefault exists run it on the original event + if (originalEvent.preventDefault) + return originalEvent.preventDefault(); + // otherwise set the returnValue property of the original event to false (IE) + originalEvent.returnValue = false; + }; + event.stopPropagation = function() { + // if stopPropagation exists run it on the original event + if (originalEvent.stopPropagation) + return originalEvent.stopPropagation(); + // otherwise set the cancelBubble property of the original event to true (IE) + originalEvent.cancelBubble = true; + }; + // Fix target property, if necessary if ( !event.target && event.srcElement ) event.target = event.srcElement; + + // check if target is a textnode (safari) + if (jQuery.browser.safari && event.target.nodeType == 3) + event.target = originalEvent.target.parentNode; + + // Add relatedTarget, if necessary + if ( !event.relatedTarget && event.fromElement ) + event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement; // Calculate pageX/Y if missing and clientX/Y available - if ( typeof event.pageX == "undefined" && typeof event.clientX != "undefined" ) { + if ( event.pageX == null && event.clientX != null ) { var e = document.documentElement, b = document.body; - event.pageX = event.clientX + (e.scrollLeft || b.scrollLeft); - event.pageY = event.clientY + (e.scrollTop || b.scrollTop); + event.pageX = event.clientX + (e && e.scrollLeft || b.scrollLeft || 0); + event.pageY = event.clientY + (e && e.scrollTop || b.scrollTop || 0); } - - // check if target is a textnode (safari) - if (jQuery.browser.safari && event.target.nodeType == 3) { - // store a copy of the original event object - // and clone because target is read only - var originalEvent = event; - event = jQuery.extend({}, originalEvent); - - // get parentnode from textnode - event.target = originalEvent.target.parentNode; - // add preventDefault and stopPropagation since - // they will not work on the clone - event.preventDefault = function() { - return originalEvent.preventDefault(); - }; - event.stopPropagation = function() { - return originalEvent.stopPropagation(); - }; - } + // Add which for key events + if ( !event.which && (event.charCode || event.keyCode) ) + event.which = event.charCode || event.keyCode; - // fix preventDefault and stopPropagation - if (!event.preventDefault) - event.preventDefault = function() { - this.returnValue = false; - }; - - if (!event.stopPropagation) - event.stopPropagation = function() { - this.cancelBubble = true; - }; + // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs) + if ( !event.metaKey && event.ctrlKey ) + event.metaKey = event.ctrlKey; + + // Add which for click: 1 == left; 2 == middle; 3 == right + // Note: button is not normalized, so don't use it + if ( !event.which && event.button ) + event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); return event; } @@ -184,9 +254,12 @@ jQuery.fn.extend({ * * In most cases, you can define your event handlers as anonymous functions * (see first example). In cases where that is not possible, you can pass additional - * data as the second paramter (and the handler function as the third), see + * data as the second parameter (and the handler function as the third), see * second example. * + * Calling bind with an event type of "unload" will automatically + * use the one method instead of bind to prevent memory leaks. + * * @example $("p").bind("click", function(){ * alert( $(this).text() ); * }); @@ -223,8 +296,8 @@ jQuery.fn.extend({ * @cat Events */ bind: function( type, data, fn ) { - return this.each(function(){ - jQuery.event.add( this, type, fn || data, data ); + return type == "unload" ? this.one(type, data, fn) : this.each(function(){ + jQuery.event.add( this, type, fn || data, fn && data ); }); }, @@ -232,7 +305,7 @@ jQuery.fn.extend({ * Binds a handler to a particular event (like click) for each matched element. * The handler is executed only once for each element. Otherwise, the same rules * as described in bind() apply. - The event handler is passed an event object that you can use to prevent + * The event handler is passed an event object that you can use to prevent * default behaviour. To stop both default action and event bubbling, your handler * has to return false. * @@ -259,7 +332,7 @@ jQuery.fn.extend({ jQuery.event.add( this, type, function(event) { jQuery(this).unbind(event); return (fn || data).apply( this, arguments); - }, data); + }, fn && data); }); }, @@ -299,15 +372,35 @@ jQuery.fn.extend({ }, /** - * Trigger a type of event on every matched element. + * Trigger a type of event on every matched element. This will also cause + * the default action of the browser with the same name (if one exists) + * to be executed. For example, passing 'submit' to the trigger() + * function will also cause the browser to submit the form. This + * default action can be prevented by returning false from one of + * the functions bound to the event. + * + * You can also trigger custom events registered with bind. * * @example $("p").trigger("click") * @before

Hello

* @result alert('hello') * + * @example $("p").click(function(event, a, b) { + * // when a normal click fires, a and b are undefined + * // for a trigger like below a refers too "foo" and b refers to "bar" + * }).trigger("click", ["foo", "bar"]); + * @desc Example of how to pass arbitrary data to an event + * + * @example $("p").bind("myEvent",function(event,message1,message2) { + * alert(message1 + ' ' + message2); + * }); + * $("p").trigger("myEvent",["Hello","World"]); + * @result alert('Hello World') // One for each paragraph + * * @name trigger * @type jQuery * @param String type An event type to trigger. + * @param Array data (optional) Additional data to pass as arguments (after the event object) to the event handler * @cat Events */ trigger: function( type, data ) { @@ -342,7 +435,7 @@ jQuery.fn.extend({ return this.click(function(e) { // Figure out which function to execute - this.lastToggle = this.lastToggle == 0 ? 1 : 0; + this.lastToggle = 0 == this.lastToggle ? 1 : 0; // Make sure that clicks stop e.preventDefault(); @@ -366,9 +459,9 @@ jQuery.fn.extend({ * (a common error in using a mouseout event handler). * * @example $("p").hover(function(){ - * $(this).addClass("over"); + * $(this).addClass("hover"); * },function(){ - * $(this).addClass("out"); + * $(this).removeClass("hover"); * }); * * @name hover @@ -382,10 +475,10 @@ jQuery.fn.extend({ // A private function for handling mouse 'hovering' function handleHover(e) { // Check if mouse(over|out) are still within the same parent element - var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget; + var p = e.relatedTarget; // Traverse up the tree - while ( p && p != this ) try { p = p.parentNode } catch(e) { p = this; }; + while ( p && p != this ) try { p = p.parentNode; } catch(e) { p = this; }; // If we actually just moused on to a sub-element, ignore it if ( p == this ) return false; @@ -405,9 +498,13 @@ jQuery.fn.extend({ * the response times of your web applications. * * In a nutshell, this is a solid replacement for using window.onload, - * and attaching a function to that. By using this method, your bound Function + * and attaching a function to that. By using this method, your bound function * will be called the instant the DOM is ready to be read and manipulated, - * which is exactly what 99.99% of all Javascript code needs to run. + * which is when what 99.99% of all JavaScript code needs to run. + * + * There is one argument passed to the ready event handler: A reference to + * the jQuery function. You can name that argument whatever you like, and + * can therefore stick with the $ alias without risk of naming collisions. * * Please ensure you have no code in your <body> onload event handler, * otherwise $(document).ready() may not fire. @@ -417,22 +514,30 @@ jQuery.fn.extend({ * * @example $(document).ready(function(){ Your code here... }); * + * @example jQuery(function($) { + * // Your code using failsafe $ alias here... + * }); + * @desc Uses both the [[Core#.24.28_fn_.29|shortcut]] for $(document).ready() and the argument + * to write failsafe jQuery code using the $ alias, without relying on the + * global alias. + * * @name ready * @type jQuery * @param Function fn The function to be executed when the DOM is ready. * @cat Events + * @see $.noConflict() + * @see $(Function) */ ready: function(f) { // If the DOM is already ready if ( jQuery.isReady ) // Execute the function immediately - f.apply( document ); + f.apply( document, [jQuery] ); // Otherwise, remember the function for later - else { + else // Add the function to the wait list - jQuery.readyList.push( f ); - } + jQuery.readyList.push( function() { return f.apply(this, [jQuery]); } ); return this; } @@ -455,15 +560,20 @@ jQuery.extend({ // If there are functions bound, to execute if ( jQuery.readyList ) { // Execute all of them - for ( var i = 0; i < jQuery.readyList.length; i++ ) - jQuery.readyList[i].apply( document ); + jQuery.each( jQuery.readyList, function(){ + this.apply( document ); + }); // Reset the list of functions jQuery.readyList = null; } - // Remove event lisenter to avoid memory leak + // Remove event listener to avoid memory leak if ( jQuery.browser.mozilla || jQuery.browser.opera ) document.removeEventListener( "DOMContentLoaded", jQuery.ready, false ); + + // Remove script element used by IE hack + if( !window.frames.length ) // don't remove if frames are present (#1187) + jQuery(window).load(function(){ jQuery("#__ie_init").remove(); }); } } }); @@ -500,13 +610,15 @@ new function(){ /** * Trigger the submit event of each matched element. This causes all of the functions - * that have been bound to thet submit event to be executed. + * that have been bound to that submit event to be executed, and calls the browser's + * default submit action on the matching element(s). This default action can be prevented + * by returning false from one of the functions bound to the submit event. * * Note: This does not execute the submit method of the form element! If you need to * submit the form via code, you have to use the DOM method, eg. $("form")[0].submit(); * * @example $("form").submit(); - * @desc Triggers all submit events registered for forms, but does not submit the form + * @desc Triggers all submit events registered to the matched form(s), and submits them. * * @name submit * @type jQuery @@ -609,7 +721,9 @@ new function(){ /** * Trigger the blur event of each matched element. This causes all of the functions - * that have been bound to thet blur event to be executed. + * that have been bound to that blur event to be executed, and calls the browser's + * default blur action on the matching element(s). This default action can be prevented + * by returning false from one of the functions bound to the blur event. * * Note: This does not execute the blur method of the underlying elements! If you need to * blur an element via code, you have to use the DOM method, eg. $("#myinput")[0].blur(); @@ -651,7 +765,9 @@ new function(){ /** * Trigger the select event of each matched element. This causes all of the functions - * that have been bound to thet select event to be executed. + * that have been bound to that select event to be executed, and calls the browser's + * default select action on the matching element(s). This default action can be prevented + * by returning false from one of the functions bound to the select event. * * @example $("p").select(); * @before

Hello

@@ -834,8 +950,7 @@ new function(){ // script does not exist if jQuery is loaded dynamically if ( script ) script.onreadystatechange = function() { - if ( this.readyState != "complete" ) return; - this.parentNode.removeChild( this ); + if ( document.readyState != "complete" ) return; jQuery.ready(); }; @@ -863,16 +978,3 @@ new function(){ jQuery.event.add( window, "load", jQuery.ready ); }; - -// Clean up after IE to avoid memory leaks -if (jQuery.browser.msie) - jQuery(window).one("unload", function() { - var global = jQuery.event.global; - for ( var type in global ) { - var els = global[type], i = els.length; - if ( i && type != 'unload' ) - do - jQuery.event.remove(els[i-1], type); - while (--i); - } - });