<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="yahoo-min.js"></script>
<script src="event-min.js"></script>
<script language="JavaScript">
var onLogin=new YAHOO.util.CustomEvent("onlogin");
function hiLogin()
{
alert("hello");
}
function hiLogin1()
{
alert("Hello111");
}
onLogin.subscribe(hiLogin);
onLogin.subscribe(hiLogin);
onLogin.subscribe(hiLogin1);
function btcl()
{
window.status="click button";
onLogin.fire();
}
</script>
</head>
<body>
<input type="button" title="Click me" onclick="btcl()" value="Click me"/>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="yahoo-min.js"></script>
<script src="event-min.js"></script>
<script language="JavaScript">
var onLogin=new YAHOO.util.CustomEvent("onlogin");
function hiLogin()
{
alert("hello");
}
function hiLogin1()
{
alert("Hello111");
}
onLogin.subscribe(hiLogin);
onLogin.subscribe(hiLogin);
onLogin.subscribe(hiLogin1);
function btcl()
{
window.status="click button";
onLogin.fire();
}
</script>
</head>
<body>
<input type="button" title="Click me" onclick="btcl()" value="Click me"/>
</body>
</html>
说明:
1 使用了Yahoo的JS开发包,Yahoo的js文件一般都有两个,一个是原版,一个是min版本,min版本和原版的功能是完全一样,至于为什么这么小呢,因为删除了所有的注释、换行、空格,并且变量的命名也用最少的字符表示,所以小了很多。
2 Yahoo的事件包包含了普通的事件订阅等功能,使用时比自己开发一套事件路由程序要方便的多。
便于分析,帖了两个JS包的类结构图如下
Yahoo.js:
Event.js:
参考地址:
http://developer.yahoo.com/yui/event/ Yahoo
http://www.dustindiaz.com/custom-events/ Web Standards with Imagination
源代码下载
Yahoo_Event_Test