I've cleaned up and documented the events plugin, it's close to being ready for 1.0.
This commit is contained in:
John Resig
parent
7dd68a0811
commit
37c237af35
1 changed files with 163 additions and 107 deletions
264
event/event.js
264
event/event.js
|
|
@ -1,124 +1,180 @@
|
||||||
(function(){
|
// We're overriding the old toggle function, so
|
||||||
var e = ["blur","focus","contextmenu","load","resize","scroll","unload",
|
// remember it for later
|
||||||
"click","dblclick","mousedown","mouseup","mouseenter","mouseleave",
|
$.fn._toggle = $.fn.toggle;
|
||||||
"mousemove","mouseover","mouseout","change","reset","select","submit",
|
|
||||||
"keydown","keypress","keyup","abort","error","ready"];
|
|
||||||
|
|
||||||
for ( var i = 0; i < e.length; i++ ) {
|
/**
|
||||||
(function(){
|
* Toggle between two function calls every other click.
|
||||||
var o = e[i];
|
*/
|
||||||
$.fn[o] = function(f){ return this.bind(o, f); };
|
$.fn.toggle = function(a,b) {
|
||||||
$.fn["un"+o] = function(f){ return this.unbind(o, f); };
|
// If two functions are passed in, we're
|
||||||
$.fn["do"+o] = function(){ return this.trigger(o); };
|
// toggling on a click
|
||||||
$.fn["one"+o] = function(f){ return this.bind(o, function(e){
|
return a && b ? this.click(function(e){
|
||||||
if ( this[o+f] !== null ) { return true; }
|
// Figure out which function to execute
|
||||||
this[o+f]++;
|
this.last = this.last == a ? b : a;
|
||||||
return $.apply(this,f,[e]);
|
|
||||||
}); };
|
|
||||||
|
|
||||||
// Deprecated
|
// Make sure that clicks don't pass through
|
||||||
//$.fn["on"+o] = function(f){ return this.bind(o, f); };
|
e.preventDefault();
|
||||||
})();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
|
// and execute the function
|
||||||
|
return $.apply( this, this.last, [e] ) || false;
|
||||||
|
}) :
|
||||||
|
|
||||||
|
// Otherwise, execute the old toggle function
|
||||||
|
this._toggle();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle between two function calls on mouse over/out.
|
||||||
|
*/
|
||||||
$.fn.hover = function(f,g) {
|
$.fn.hover = function(f,g) {
|
||||||
// Check if mouse(over|out) are still within the same parent element
|
|
||||||
return this.each(function(){
|
|
||||||
var obj = this;
|
|
||||||
$.event.add(this, "mouseover", function(e) {
|
|
||||||
var p = ( e.fromElement !== null ? e.fromElement : e.relatedTarget );
|
|
||||||
while ( p && p != obj ) { p = p.parentNode; }
|
|
||||||
if ( p == obj ) { return false; }
|
|
||||||
return $.apply(obj,f,[e]);
|
|
||||||
});
|
|
||||||
$.event.add(this, "mouseout", function(e) {
|
|
||||||
var p = ( e.toElement !== null ? e.toElement : e.relatedTarget );
|
|
||||||
while ( p && p != obj ) { p = p.parentNode; }
|
|
||||||
if ( p == obj ) { return false; }
|
|
||||||
return $.apply(obj,g,[e]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
$.$$isReady = false;
|
// A private function for haandling mouse 'hovering'
|
||||||
$.$$ready = [];
|
function handleHover(e) {
|
||||||
|
// Check if mouse(over|out) are still within the same parent element
|
||||||
|
var p = e.fromElement || e.toElement || e.relatedTarget;
|
||||||
|
while ( p && p != this ) p = p.parentNode;
|
||||||
|
|
||||||
// Handle when the DOM is ready
|
// If we actually just moused on to a sub-element, ignore it
|
||||||
$.ready = function() {
|
if ( p == this ) return false;
|
||||||
if ( !$.$$isReady ) {
|
|
||||||
$.$$isReady = true;
|
// Execute the right function
|
||||||
if ( $.$$ready ) {
|
return $.apply(this,e.type == 'mouseover' ? f : g,[e]);
|
||||||
for ( var i = 0; i < $.$$ready.length; i++ ) {
|
|
||||||
$.apply( document, $.$$ready[i] );
|
|
||||||
}
|
|
||||||
$.$$ready = [];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bind the function to the two event listeners
|
||||||
|
return this.mouseover(handleHover).mouseout(handleHover);
|
||||||
};
|
};
|
||||||
|
|
||||||
// If Mozilla is used
|
|
||||||
if ( $.browser == "mozilla" || $.browser == "opera" ) {
|
|
||||||
// Use the handy event callback
|
|
||||||
document.addEventListener( "DOMContentLoaded", $.ready, null );
|
|
||||||
|
|
||||||
// If IE is used, use the excellent hack by Matthias Miller
|
|
||||||
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
|
|
||||||
} else if ( $.browser == "msie" ) {
|
|
||||||
|
|
||||||
// Only works if you document.write() it
|
|
||||||
document.write('<scr' + 'ipt id=__ie_init defer=true ' +
|
|
||||||
'src=javascript:void(0)><\/script>');
|
|
||||||
|
|
||||||
// Use the defer script hack
|
|
||||||
var script = document.getElementById('__ie_init');
|
|
||||||
script.onreadystatechange = function() {
|
|
||||||
if ( this.readyState == 'complete' ) {
|
|
||||||
$.ready();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Clear from memory
|
|
||||||
script = null;
|
|
||||||
|
|
||||||
// If Safari is used
|
|
||||||
} else if ( $.browser == "safari" ) {
|
|
||||||
$.$$timer = setInterval(function(){
|
|
||||||
if ( document.readyState == "loaded" ||
|
|
||||||
document.readyState == "complete" ) {
|
|
||||||
|
|
||||||
clearInterval( $.$$timer );
|
|
||||||
$.$$timer = null;
|
|
||||||
|
|
||||||
$.ready();
|
|
||||||
}
|
|
||||||
}, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
// A fallback, that will always work, just in case
|
|
||||||
$.event.add( window, "load", $.ready );
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Bind a function to fire when the DOM is ready.
|
* Bind a function to fire when the DOM is ready.
|
||||||
*/
|
*/
|
||||||
$.fn.ready = function(f) {
|
$.fn.ready = function(f) {
|
||||||
if ( $.$$isReady ) {
|
// If the DOM is already ready
|
||||||
|
if ( $.isReady )
|
||||||
|
// Execute the function immediately
|
||||||
$.apply( document, f );
|
$.apply( document, f );
|
||||||
} else {
|
|
||||||
if ( ! $.$$ready ) {
|
|
||||||
$.$$ready = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
$.$$ready.push( f );
|
// Otherwise, remember the function for later
|
||||||
|
else {
|
||||||
|
// Add the function to the wait list
|
||||||
|
$.readyList.push( f );
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.toggle = function(a,b) {
|
(function(){
|
||||||
return a && b ? this.click(function(e){
|
/*
|
||||||
this.$$last = this.$$last == a ? b : a;
|
* Bind a number of event-handling functions, dynamically
|
||||||
e.preventDefault();
|
*/
|
||||||
return $.apply( this, this.$$last, [e] ) || false;
|
var e = ["blur","focus","contextmenu","load","resize","scroll","unload",
|
||||||
}) : this._toggle();
|
"click","dblclick","mousedown","mouseup","mouseenter","mouseleave",
|
||||||
};
|
"mousemove","mouseover","mouseout","change","reset","select","submit",
|
||||||
|
"keydown","keypress","keyup","abort","error","ready"];
|
||||||
|
|
||||||
|
// Go through all the event names, but make sure that
|
||||||
|
// it is enclosed properly
|
||||||
|
for ( var i = 0; i < e.length; i++ ) {(function(){
|
||||||
|
|
||||||
|
var o = e[i];
|
||||||
|
|
||||||
|
// Handle event binding
|
||||||
|
$.fn[o] = function(f){ return this.bind(o, f); };
|
||||||
|
|
||||||
|
// Handle event unbinding
|
||||||
|
$.fn["un"+o] = function(f){ return this.unbind(o, f); };
|
||||||
|
|
||||||
|
// Handle event triggering
|
||||||
|
$.fn["do"+o] = function(){ return this.trigger(o); };
|
||||||
|
|
||||||
|
// Finally, handle events that only fire once
|
||||||
|
$.fn["one"+o] = function(f){
|
||||||
|
// Attach the event listener
|
||||||
|
return this.bind(o, function(e){
|
||||||
|
// TODO: Remove the event listener, instead of this hack
|
||||||
|
|
||||||
|
// If this function has already been executed, stop
|
||||||
|
if ( this[o+f] !== null )
|
||||||
|
return true;
|
||||||
|
|
||||||
|
// Otherwise, mark as having been executed
|
||||||
|
this[o+f]++;
|
||||||
|
|
||||||
|
// And execute the bound function
|
||||||
|
return $.apply(this,f,[e]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
})();}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* All the code that makes DOM Ready work nicely.
|
||||||
|
*/
|
||||||
|
|
||||||
|
$.isReady = false;
|
||||||
|
$.readyList = [];
|
||||||
|
|
||||||
|
// Handle when the DOM is ready
|
||||||
|
$.ready = function() {
|
||||||
|
// Make sure that the DOM hasn't already loaded
|
||||||
|
if ( !$.isReady ) {
|
||||||
|
// Remember that the DOM is ready
|
||||||
|
$.isReady = true;
|
||||||
|
|
||||||
|
// If there are functions bound, to execute
|
||||||
|
if ( $.readyList ) {
|
||||||
|
// Execute all of them
|
||||||
|
for ( var i = 0; i < $.readyList.length; i++ )
|
||||||
|
$.apply( document, $.readyList[i] );
|
||||||
|
|
||||||
|
// Reset the list of functions
|
||||||
|
$.readyList = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// If Mozilla is used
|
||||||
|
if ( $.browser == "mozilla" || $.browser == "opera" ) {
|
||||||
|
// Use the handy event callback
|
||||||
|
$.event.add( document, "DOMContentLoaded", $.ready );
|
||||||
|
|
||||||
|
// If IE is used, use the excellent hack by Matthias Miller
|
||||||
|
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
|
||||||
|
} else if ( $.browser == "msie" ) {
|
||||||
|
|
||||||
|
// Only works if you document.write() it
|
||||||
|
document.write('<scr' + 'ipt id=__ie_init defer=true ' +
|
||||||
|
'src=javascript:void(0)><\/script>');
|
||||||
|
|
||||||
|
// Use the defer script hack
|
||||||
|
var script = document.getElementById('__ie_init');
|
||||||
|
script.onreadystatechange = function() {
|
||||||
|
if ( this.readyState == 'complete' )
|
||||||
|
$.ready();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Clear from memory
|
||||||
|
script = null;
|
||||||
|
|
||||||
|
// If Safari is used
|
||||||
|
} else if ( $.browser == "safari" ) {
|
||||||
|
// Continually check to see if the document.readyState is valid
|
||||||
|
$.safariTimer = setInterval(function(){
|
||||||
|
// loaded and complete are both valid states
|
||||||
|
if ( document.readyState == "loaded" ||
|
||||||
|
document.readyState == "complete" ) {
|
||||||
|
|
||||||
|
// If either one are found, remove the timer
|
||||||
|
clearInterval( $.safariTimer );
|
||||||
|
$.safariTimer = null;
|
||||||
|
|
||||||
|
// and execute any waiting functions
|
||||||
|
$.ready();
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// A fallback to window.onload, that will always work
|
||||||
|
$.event.add( window, "load", $.ready );
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue