通过javascript 为html元素的一个事件添加多个句柄

来源：互联网发布：iphone5s蜂窝数据设置编辑：程序博客网时间：2024/06/06 03:12

<body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <div id="divMsg" style="WIDTH: 100%; PADDING:10px HEIGHT: 160px; border:1px solid black;"></div>
   <input id="btn1" style="Z-INDEX: 101; LEFT: 408px; POSITION: absolute; TOP: 304px" onclick="return firstHandle(); "
    type="button" value="Button1"> 
   <input id="btn2" onclick="addHandle();" style="Z-INDEX: 102; LEFT: 624px; POSITION: absolute; TOP: 304px" onclick=""
    type="button" value="Add a handle to Button1">
  </form>
  <script language="javascript" type="text/javascript">

  var msgContainer = document.getElementById("divMsg"); // 消息容器，用于显示按钮Button1的事件onclick的句柄
  var btn1 = document.getElementById("btn1");    // 测试按钮，用来为其增加句柄的操作对象


  // 添加新的句柄
  function addHandle( )
  {
   var oldHandle = btn1.onclick; // 保留原有的句柄
   var addTimes = 1;
   btn1.onclick=function (){
    if( oldHandle()==false)  // 注意：oldHandle后必须加（），因为oldHandle是一个函数名
     return false;   // 如果原有句柄的返回值是false（即指示终止后续的操作时），就不再执行后面的操作
    else{
     alert("this is a new handle, the " + addTimes + " times +++"); // 为事件添加新句柄，
     addTimes ++;
    }
   }

   showHandles();
  };


  // 在消息容器中列出Button1的事件onclick的句柄
  function showHandles()
  {
   msgContainer.innerHTML = btn1.value;
   msgContainer.innerHTML = btn1.onclick;
  }

  showHandles(); // 调用函数

  // 第一个句柄，即按钮定义时的初始句柄
  function firstHandle()
  {
   alert(' it is a button whose id is [btn1] ');
   return true;  // 返回值，用于模拟验证时的情况（如果验证未通过则终止继续后面的操作）
  };
  </script>
</body>