JavaScript DOM事件(筆記)

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript DOM事件(筆記)

編輯：關於JavaScript

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

上一頁:JavaScript 模塊化編程(筆記)
下一頁:javascript笛卡爾積算法實現方法

關於JavaScript

原生JS和jQuery版實現文件上傳功能: 本文實例分享了原生JS版和jQuery 版實現文件上傳功能的例子，供大家參考，具體內容如下<!
JS兩種定義Function非常常用的方法: 大家都知道Javascript 有兩個種定義Function的方法非常常用。例如function a
JavaScript Math.ceil 方法(對數值向上取整): JavaScript Math.ceil 方法Math.ceil 方法用於對數值向上取整，即得到大於

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章