JavaScript DOM事件(筆記)，javascriptdom

JavaScript DOM事件(筆記)，javascriptdom

第1章 事件流

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

第2章 事件處理常式

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

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

2-2 DOM0級事件處理常式

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

<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一下,不起作用;

<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事件處理常式及跨瀏覽器

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

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

>2.瀏覽器安全色

//將添加和刪除事件處理常式封裝到對象中並賦值給變數'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() == 阻止事件的預設行為;

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屬性 == 用於阻止事件的預設行為;

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方法

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.封裝拖拽函數

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.抽獎程式

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';  }