DHTML高级使用: Event Hook
星期日, 十二月 21st, 2003代码来源: 微软出版社出版<Inside DHTML>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Event Hook</title>
<meta name=”GENERATOR” content=”Microsoft Visual Studio.NET 7.0″>
<meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5″>
<style>
.out {text-decoration: none}
.over {text-decoration: underline}
</style>
<script>
function hookupEvents(){
var bindings = document.all.tags(“BINDEVENT”);
for(var intLoop = 0; intLoop < bindings.length; intLoop++){
var bind = bindings[intLoop];
if(( null != bind.getAttribute(“event”)) &&
(null != bind.getAttribute(“action”))){
var bEvent = bind.getAttribute(“event”);
var bAction = new Function( “return ” +
bind.getAttribute(“action”) +
”(arguments[0]);”);
var bCondition = ( null == bind.getAttribute(“condition”)) ?
null:
new Function( “return “+
bind.getAttribute(“condition”) +
”(arguments[0]);” );
var bTree = ( “walk” == bind.getAttribute(“tree”));
var bSrc = bind.getAttribute(“for”);
//alert(bCondition);
register( bEvent, bAction, bCondition, bTree, bSrc);
}
}
}
function register(eventName, action){
var eventSrc = ( null != arguments[4]) ?
document.all[arguments[4]] :
document;
if( null == eventSrc.manager)
eventSrc.manager = new Object;
if( null == eventSrc.manager[eventName] ) {
eventSrc.manager[eventName] = new Object;
eventSrc.manager[eventName].length = 0;
setupHandler(eventName, eventSrc);
}
var ct = eventSrc.manager[eventName].length++;
// alert(eventSrc.manager[eventName].length);
eventSrc.manager[eventName][ct] = new Object;
eventSrc.manager[eventName][ct].doAction = action;
eventSrc.manager[eventName][ct].condition =
(null != arguments[2]) ? arguments[2] : alwaysTrue;
eventSrc.manager[eventName][ct].doTree =
(null != arguments[3]) ? arguments[3] : false;
}
function setupHandler(eventName, eventSrc){
eventSrc[eventName] = new Function( “runHandler( ‘” + eventName + “‘, this);”);
// alert(eventSrc[eventName]);
}
function alwaysTrue(){
return true;
}
function runHandler(eventName, eventSrc){
var src = event.srcElement;
for(var intLoop = 0; intLoop < eventSrc.manager[eventName].length; intLoop++){
// alert(eventName+”:”+intLoop+”:”+eventSrc.manager[eventName][intLoop].condition);
if( eventSrc.manager[eventName][intLoop].condition(src) )
eventSrc.manager[eventName][intLoop].doAction(src);
}
src = src.parentElement;
var top = ( this.tagName == null) ? “HTML” : this.tagName;
while( top != src.tagName){
for( var intLoop=0; intLoop < eventSrc.manager[eventName].length; intLoop++)
if( eventSrc.manager[eventName][intLoop].condition(src) &&
eventSrc.manager[eventName][intLoop].doTree)
eventSrc.manager[eventName][intLoop].doAction(src);
src = src.parentElement;
}
}
//////////////////////////demostration****************************************************************************************
function swapEffects (src){
if( null != src.getAttribute(“effect”)){
var tempClass = src.className;
src.className = src.getAttribute(“effect”);
src.setAttribute(“effect”, tempClass);
}
}
function checkEffect(src){
return (src.getAttribute(“effect”) !=null);
}
function swapText(src){
src.innerText = “mouse over”;
}
window.onload = hookupEvents;
</script>
</head>
<body >something not important
<BINDEVENT event=”onmouseover” action=”swapEffects” condition=”checkEffect” tree=”walk” for=”myLink”></BINDEVENT>
<!–<BINDEVENT event=”onmouseover” action=”swapText” tree=”walk” for=”myLink”></BINDEVENT>–>
<BINDEVENT event=”onmouseout” action=”swapEffects” condition=”checkEffect” tree=”walk” for=”myLink”></BINDEVENT>
<font effect=over tree=”walk”>aaa <a href=# id=myLink effect=”over” class=”out”>mouse over <b>a</b>nd out effect</a></font>
</body>
</html>