如何为js控件添加事件监听

我们在制作网页时，常常要制作一些js控件。各js控件虽然制作出来后，但有时要在一起使用时，调用到同样的事件就会引起冲突。 如editselectunit和editselectrole控件同时使用到了document的onclick事件。此时，如果在这两个事件的<script language='javascript'></script>处分别编写如下document.onclick = function() { alert('unit');};

documnet.οnclick=function {alert('role');}，则上述代码只有一个document.onclick事件会起作用。如先声明

var role = new editSelectRole();

var unit = new editSelectUnit();

则role中的document.onclick()将起作用，有点先来先得的味道。unit中的document.onclick()将不起作用; 

那么如何使得这两个控件均能使用documnet.onclick（）事件呢？答案是在这两个控件中分别添加事件监听。在ie中

我们使用attachEvent，在非IE的浏览器中使用addEventListener来实现。

如editSelectUnit控件中添加onclick()，其代码如下：

     var clickHandler = function()
      {
           with(window.event)
         { 
             //  alert( document.all(activetxtPopup_Unit).name);
             if (srcElement != document.all(activetxtPopup_Unit))
          {
            document.all(activeContainer_Unit).style.display = 'none' ;
          }
         }
      } 
    
     if (navigator.appVersion.indexOf("MSIE") != -1)
    {   // IE用attachEvent
        document.attachEvent("onclick", clickHandler);           
    }
    else
    {   // 非IE用addEventListener
        document.addEventListener("click", clickHandler, false); 
    }

 

而editSelectRole控件中添加onclick()，其代码如下：

//任意点击时关闭该控件 //ie6的情况可以由下面的切换焦点处理代替 
  var clickHandler = function()
  { 
       with(window.event)
     {
        // alert( document.all(activetxtPopup_Role).name);   
         if (srcElement != document.all(activetxtPopup_Role))
       document.all(activeContainer_Role).style.display = 'none' ;
     }
  }
   
     if (navigator.appVersion.indexOf("MSIE") != -1)
    {   // IE用attachEvent
        document.attachEvent("onclick", clickHandler);           
    }
    else
    {   // 非IE用addEventListener
        document.addEventListener("click", clickHandler, false); 
    }