DIV CSS 佈局教程網

 第1章 事件流

1-1.事件冒泡:事件最開始由最具體的元素(文檔中嵌套層次最深的那個節點)接收;
然後逐級向上傳播至最不具體的那個節點(文檔);
1-2.事件捕獲:不太具體的節點應該更早接收到事件,而最具體的節點最後接收到事件;

第2章 事件處理程序

2-1 HTML事件處理程序
//缺點:HTML和JS代碼緊密的耦合在一起;

1 <input type="button" value="按鈕" onclick="showMessage()">

2-2 DOM0級事件處理程序

//較傳統的方式:把一個函數賦值給一個事件的處理程序屬性,用的比較多;
//優點:簡單/跨浏覽器;

1 2 3 4 5 6 7 8 <input type="button" value="按鈕" id="btn2"> <script> var btn2 = document.getElementById('btn2'); //取得btn2按鈕對象; btn2.onclick = function () { //給btn2添加onclick屬性; alert('這是通過DOM0級添加的事件!'); } btn2.onclick=null; //刪除onclick屬性; </script>

2-3 DOM2級事件處理程序

//DOM2級事件定義了兩個方法:用於處理指定和刪除事件處理程序的操作;
//addEventListener()和removeEventListner();
//接收三個參數:要處理的事件名/事件處理函數和布爾值;
//在IE8一下,不起作用;

1 2 3 4 5 6 7 8 9 <input type="button" value="按鈕" id="btn3"> <script> var btn3 = document.getElementById('btn3'); btn3.addEventListener('click',showMessage,false); //添加事件程序; btn3.addEventListener('click',function(){ //添加多個事件程序; alert(this.value); },false); btn3.removeEventListener('click',showMessage,false); //刪除事件程序; </script>

2-4 IE事件處理程序及跨浏覽器

//接收兩個參數:事件處理函數名稱和事件處理函數

1 2 3 4 5 <script> var btn3 = document.getElementById('btn3'); btn3.attachEvent('onclick',showMessage); //添加事件; btn3.detachEvent('onclick',showMessage); //刪除事件; </script>

>2.浏覽器兼容

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //將添加和刪除事件處理程序封裝到對象中並賦值給變量'eventUtil'; var eventUtil = { //添加句柄 addHandler:function(element,type,handler){ //判斷DOM2級事件處理程序; if(element.addEventListener){ element.addEventListener(type,handler,false); //判斷IE浏覽器; }else if(element.attachEvent){ element.attachEvent("on"+type,handler); //使用DOM0級事件處理程序; }else{ element['on'+type] = handler; } }; //刪除句柄 removeHandler:function(element,type,handler){ //判斷DOM2級事件處理程序; if(element.removeEventListener){ element.removeEventListener(type,handler,false); //判斷IE浏覽器; }else if(element.detachEvent){ element.detachEvent("on"+type,handler); //使用DOM0級事件處理程序; }else{ element['on'+type] = null; }; }; }; //跨浏覽器添加事件處理程序; eventUtil.addHandler(btn3,'click',showMessage);

第3章 事件對象

3-1 DOM中的事件對象

//在觸發DOM上的事件時都會產生一個對象==event;

>1.type == 獲取事件類型;
>2.target == 獲取事件目標;
>3.stopPropagation() == 停止事件冒泡;
>4.preventDefault() == 阻止事件的默認行為;

1 2 3 4 5 6 7 8 9 function showMes(event){ alert(event.type); //onclick;點擊事件; alert(event.target.nodeName); 　　//INPUT;input按鈕被觸發; event.stopPropagation(); //停止事件冒泡; } <a href="event.html" onclick="stopGoto();">跳轉</a> function stopGoto(event){ event.preventDefault();　　　　　　　//阻止默認行為; }

3-2 IE中的事件對象

>1.type == 同上;
>2.srcElement屬性 == 獲取事件目標;
>3.cancleBubble屬性 == 阻止冒泡;設置true表示阻止冒泡,false為不組織冒泡;
>4.returnValue屬性 == 用於阻止事件的默認行為;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function showMes(event){ //非IE用event,IE8以下用window.event; event = event || window.event; //事件目標兼容; var ele = event.target || event.srcElement; //兼容阻止事件冒泡; if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancleBubble(); }; //兼容取消事件默認行為; if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }

第4章 QQ面板拖拽效果

>1.封裝獲取Class方法

1 2 3 4 5 6 7 8 9 10 11 12 function getClass(clsName,parent){ var oParent = parent?document.getElementById(parent):document, eles = [], elements = oParent.getElementsByTagName('*');   for (var i=0,l=elements.length; i<l; i++){ if(elements[i].className == clsName){ eles.push(elements[i]); } } return eles; }

>2.封裝拖拽函數

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 window.onload = drag; function drag(){ var oTitle = getClass('login_logo_webqq','loginPanel')[0]; //拖拽 oTitle.onmousedown = fnDown; //關閉彈窗 var oClose = document.getElementById('ui_boxyClose'); oClose.onclick = function(){ document.getElementById('loginPanel').style.display = 'none'; } //切換狀態 var loginState = document.getElementById('loginstate'), stateList = document.getElementById('loginStatePanel'), lis = stateList.getElementsByTagName('li'), stateTxt = document.getElementById('login2qq_state_txt'), loginStateShow = document.getElementById('login-state_show'); loginState.onclick = function(e){ //阻止冒泡到document使ul隱藏; e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }esle{ e.cancleBubble = true; } stateList.style.display = "block"; } //鼠標滑過/離開和點擊狀態列表時 for(var i=0,i<lis.length,i++){ lis[i].onmouseover = function(){ this.style.background = "#567"; } lis[i].onmouseout = function(){ this.style.background = "#fff"; } lis[i].onclick = function(e){ //阻止冒泡到loginState使stateList顯示; e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }esle{ e.cancleBubble = true; } var id = this.id; stateList.style.display = "none"; stateTxt.innerHTML = getClass('stateSelect_text',id)[0].innerHTML; loginStateShow.className = ''; loginStateShow.className = 'login-state-show '+id; } } document.onclick = function(){ stateList.style.display = "none"; } } //鼠標按下事件; function fnDown(event){ event = event || window.event; var oDrag = document.getElementById('loginPanel'), //鼠標按下時,鼠標和面板之間的距離; disX = event.clientX - oDrag.offsetLeft, disY = event.clientY - oDrag.offsetTop; //移動 document.onmouseover = function(event){ event = event || window.event; fnMove(event,disX,disY); } //釋放鼠標 document.onmouseup = function(){ document.onmouseover = null; document.onmouseup = null; } } //鼠標移動事件; function fnMove (e,posX,posY){ var oDrag = document.getElementById('loginPanel'), l = e.clientX-posX, t = e.clientY-posY, winW = document.documentElement.clientWidth || document.body.clientWidth, winH = document.documentElement.clientHeight || document.body.clientHeight; maxW = winW-oDrag.offsetWidth, maxH = winH-oDrag.offsetHeight; if(l<0){ l = 0; }else if(l>maxW){ l = maxW; } if(t<0){ t = 0; }else if(t>maxH){ t=maxH; } oDrag.style.left = l+'px'; oDrag.style.top = t+'px'; }

第4章 抽獎系統

>1.鍵盤事件

>>1.keyDown:當用戶按下鍵盤上的任意鍵時觸發,而且如果按住不放的話,會重復觸發此事件;
>>2.keyPress:當用戶按下鍵盤上的字符鍵時觸發,而且如果按住不放的話,會重復觸發此事件;
>>3.keyUp:當用戶釋放鍵盤上的鍵時觸發;

>2.抽獎程序

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 var data = ['iPhone5','iPad','三星電腦','謝謝參與'], timer = null, flag = 0; window.onload = function(){ var play = document.getElementById('play'), stop = document.getElementById('stop'); //(鼠標)開始抽獎 play.onclick = palyFun; stop.onclick = stopFun; //(鍵盤Enter)開始抽獎 document.onkeyup = function(event){ event = event || window.event; if(event.keyCode == 13){ if(flag == 0){ palyFun(); flag = 1; }else{ stopFun(); flag = 0; } } } } function palyFun(){ var title = document.getElementById('title'), play = document.getElementById('play'); //清除之前的定時器,放置定時器重復; clearInterval(timer); 　　　　//設置定時器; timer = setInterval(function(){ //隨機數*數組元素個數=數組隨機索引; var random = Math.floor(Math.random()*data.length); title.innerHTML = data[random]; },50); play.style.background = "#999"; } function stopFun(){ clearInterval(timer); var paly = document.getElementById('play'); paly.style.background = '#036'; }