1. 程式人生 > >用js給div繫結事件,實現點選切換效果的幾種方式總結

用js給div繫結事件,實現點選切換效果的幾種方式總結

用js給div繫結事件,實現點選切換效果,總結有如下幾種方式

script type="text/javascript">
  function btnAction()
  { 
		var titleNValue = document.getElementById("titleN").value;
		var complaintValue =  document.getElementById("complaint").value;
		if(titleNValue==""){
			alert("標題不能為空!");
			return false;
		}
		if(complaintValue==""){
			alert("內容不能為空!");
			return false;
		}
  }
  
  function $(obj){
      return document.getElementById(obj);
  }
  function change(n){
      for (var i=1;i<3;i++){
          if(n==i){
              /* $("a"+i).style.zIndex="100"; */
              $("a"+i).style.background ="red";
          }else{
             /*  $("a"+i).style.zIndex="0"; */
              $("a"+i).style.background ="#ddd";
          }
      }
  }
//addEventListener 是JS自帶函式
  // attachEvent 是JS自帶函式
  /* var EventUtil = new Object;
  EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
      if (oTarget.addEventListener) { // 如果還沒有繫結click事件,則進行繫結。頁面載入時候會執行這裡。
          oTarget.addEventListener(sEventType, fnHandler, false);
      } else if (oTarget.attachEvent) { // 檢視綁定了什麼事件
          oTarget.attachEvent("on" + sEventType, fnHandler);
      } else {
          oTarget["on" + sEventType] = fnHandler;
      }
  };

  EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
      if (oTarget.removeEventListener) {
          oTarget.removeEventListener(sEventType, fnHandler, false);
      } else if (oTarget.detachEvent) {
          oTarget.detachEvent("on" + sEventType, fnHandler);
      } else {
          oTarget["on" + sEventType] = null;
      }
  };

  // 最後起作用的函式
  function handleClick() {
     alert("Click!\nd"); 
      var oDiv = document.getElementById("div1");
      oDiv.style.background = '#ddd';
      
      var oDiv2 = document.getElementById("div2");
      oDiv2.style.background = 'red';
     /*  oDiv.attr("style","background-color: red"); */
      // EventUtil.removeEventHandler(oDiv, "click", handleClick);
 // }
  // 繫結DIV與觸發事件,以及函式體
  /*
  window.onload = function() {
       var oDiv = document.getElementById("div1");
      EventUtil.addEventHandler(oDiv, "click", handleClick); 
      
      var Div = document.getElementById("div2");
      EventUtil.addEventHandler(Div, "click", handleClick); 
  }
   */
  
 /*另一個繫結事件*/ 
 
    function div1(){
        var mydiv2 = document.getElementById('div2');
        mydiv2.style.background = 'white';

        var mydiv1 = document.getElementById('div1');
        mydiv1.style.background = 'red';

      /*    var div2 = document.getElementById('div2');
        if(typeof ActiveXObject !='undefined'){//ie
            var myevent = document.createEventObject();
            div2.fireEvent('onclick',myevent);//如果需要在onclick中使用myevent的某些屬性,得另外新增
        }else{//chrome,ff等
            var myevent = document.createEvent('MouseEvents');
            myevent.initEvent('click',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
            div2.dispatchEvent(myevent);
       }  */
    }
    function div2(){
        var mydiv2 = document.getElementById('div2');
        mydiv2.style.background = 'red';


        var mydiv1 = document.getElementById('div1');
        mydiv1.style.background = 'white';
    }
  
</script>