本文介绍如何在HTML页面中通过JavaScript为指定元素注册事件。示例展示了在按钮上绑定onclick事件，并关联具体的处理函数，实现点击触发特定逻辑的功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>麦鸡的TAB</title> <style> body{margin:40px; font-size:12px;} p{font-size:200%} .macji-tab a{color:#777; text-decoration:none;} .macji-tab ul.macji-nav{ position:relative; height:24px; margin:0 0 -1px; padding:0; list-style:none; overflow:hidden; } .macji-tab ul.macji-nav li a,.macji-tab ul.macji-nav li a span{ background:url(http://img.jb51.net/images/mj_bg.gif) no-repeat; } .macji-tab ul.macji-nav li{ float:left; margin-right:2px; } .macji-tab ul.macji-nav li a{ float:left; height:24px; padding:0 0 0 15px; line-height:24px; background-position:0 100%; } .macji-tab ul.macji-nav li a span{ display:block; padding:0 15px 0 0; background-position:100% 100%; } .macji-tab ul.macji-nav li a.current{ background-position:0 0; } .macji-tab ul.macji-nav li a.current span{ color:#000; background-position:100% 0; } .macji-tab div.macji-tab-container{ border:solid 1px #ccc; overflow:hidden; } .macji-tab div.macji-tab-container span{ display:none; } .macji-tab .macji-frame{ width:715px; height:47px; padding:8px; border:medium none; } </style> </head> <body> <h1>麦鸡的TAB，仿淘宝便民中心</h1> <div class="macji-tab"> <ul class="macji-nav"> <li><span>游戏快充 </span></li> <li><span>手机充值 </span></li> <li><span>机票</span></li> <li><span>本站</span></li> </ul> <div class="macji-tab-container"> <iframe name="macji-frame" src="http://auction1.taobao.com/auction/expressway/game_card.htm?css=frontpage" class="macji -frame" frameborder="0" scrolling="no"></iframe> </div> <div class="macji-tab-container"><span>这里是用来显手机充值的</span></div> <div class="macji-tab-container"><span>这里是用来显示机票的</span></div> <div class="macji-tab-container"><span>这里是用来显示麦鸡的博客</span></div> </div> <p>本站»</p> </body> </html>事件注册说明
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]