用js給div繫結事件,實現點選切換效果的幾種方式總結
阿新 • • 發佈:2019-01-29
用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>