事件绑定.寻求优雅的解决方案

假设.我页面上有 100 个按钮 . 每个按钮的onclick事件处理函数都会在页面弹出一个层 .并且这个层上有close按钮..我希望当这100个按钮中有一个触发了 onclick事件,即页面上已经弹出一个层的情况下.其他99个按钮的onclick指向另一个处理函数.... 优雅..一定要优雅....最好不要创建全局变量 ...最好循环绑定事件只在 onload事件里只执行一次,而按钮的onclick事件里不要执行循环.... 最好.......最好今天不要加班.....

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

按钮的 name 属性都相同。抓取那些按钮，，事件触发的时候！，设置onclick 事件不过，楼主既然所有按钮同一触发事件，为什么定义时候，都一样不就OK？
// 写个10个按钮的楼主可以试验下看符合要求不<!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>
  <title> LightBox </title>
  <style type="text/css">
  #box {
    text-align:right;
    background-color: #fff;
    border: 20px solid #000000;
  }
  </style>
</head>
<body>
<script type="text/javascript">

</script>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <input type="button" name="openbtn"  value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <input type="button" name="openbtn" value="打开层" />
  <div id="box" style="width:300px;height:300px;">
    </br>
    <span id="clobtn">
       <input type="button" value="关闭"/>
    </span>
  </div>
<select style="width:100px;">
    <option value="" selected="selected">Test IE6</option>
</select>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <script type="text/javascript">
  
  </script>
</body>
</html>
<!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>无标题文档</title>
</head><body><div id="list">
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
</div>
<button id="close">关闭</button>
<div id="msg">...</div><script type="text/javascript">(function(){
var on = null;
var msg = document.getElementById("msg");
document.getElementById("close").onclick = function(){ on = null; msg.innerHTML = "关闭一个层了"; }

var btns = document.getElementById("list").getElementsByTagName("button");
for(var i=0,n=btns.length;i<n;i++){
btns[i].onclick = check;
}

function check(e){
var elm = e ? e.target : window.event.srcElement;
if(!on){
on = elm;
msg.innerHTML = "显示一个层了";
}else if(on!=elm){
alert("执行另一个函数");
}
}
})();</script></body>
</html>
to 4#请问有更优雅的方案吗?   有办法让 onclick 事件处理函数check  和关闭按钮的处理函数不要共享同一个 on 元素吗另外请教你一下. 为什么外部的函数结束以后. 对象on还存在 ? 是因为传说中的闭包吗 ?请指教.谢谢
用jquery试了下
jquery下载地址：http://jquery.com/<!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>
<script language='javascript' src='js/jquery-1.3.2.js'></script>
<script language='javascript' type='text/javascript'>
$(document).ready(
function()
{
var Btn=$("input[type='submit']:not(#BtnClose)");
var Method=function()
{
alert("执行弹出层函数");
Btn
.unbind("click")
.bind("click",
function()
{
alert("已经有弹出层");
}
);
}
Btn.bind("click",Method);
$("#BtnClose").bind("click",
function()
{
Btn
.unbind("click")
.bind("click",Method);
alert("关闭了弹出层");
}
);
}

);
</script>
</head>
<body>
<input type="submit" value="按钮1"/>
<input type="submit" value="按钮2"/>
<input type="submit" value="按钮3"/>
<input type="submit" value="按钮4"/>
<input type="submit" value="按钮5"/>
<input type="submit" value="按钮6"/>
<input type="submit" id="BtnClose" value="关闭"/>
</body>
</html>
高效的方法：
<input type="hidden" value="">
我知道，这样不优雅，可是很实用。
写个闭包？没有必要，那会浪费时间。
真的到了开发，周期是最重要的