javaScriptDOM事件學習

什麼是事件

事件流——描述的是從頁面中接受事件的順序。
事件冒泡：由具體的元素接收逐級傳遞到最不具體的那一個節點。
事件捕獲:由不太具體的節點應該更早接收到事件，而最具體的節點最後接收到事件

使用事件處理程序

1. html事件處理程序。缺點：html代碼和js代碼緊密耦合。

2. DOM0級事件處理程序。

3. DOM2級事件處理程序。

   • DOM2級事件處理程序定義了兩個方法：用於處理指定和刪除事件處理程序。
     addEventListener（）和removeEventListener（）

   • 接收三個參數：要處理的事件名，做爲事件處理程序的函數和布爾值

     //btn3.addEventListener('click',message,false);

4. IE事件處理程序

   • attachEvent（）添加事件， detachEvent（）刪除事件
     接收相同的兩個參數：事件處理程序的名稱和時間處理程序的函數。不加入布爾值的緣由是IE8只支持事件冒泡

5. 跨瀏覽器解決

var eventUtil = {
            //添加事件
            addHandler:function(element, type, handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                }
                else if(element.attachEvent){
                    element.attachEvent('on'+type,handler);
                }
                else{
                    element['on'+type] = handler;
                }
            },
            //移除事件
            removeHandler:function(element, type, handler){
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false);
                }
                else if(element.detachEvent){
                    element.detachEvent('on'+type,handler);
                }
                else{
                    element['on'+type] = handler;
                }
            }
            //獲取事件對象
            getEvent:function(event){
                return event?event:window.event;
            },
            getType:function(event){
                return event.type;
            },
            getTarget:function(event){
                if(event.target){
                    return event.target;
                }
                else{
                    return event.srcElement;
                }
            },
            //阻止事件冒泡
            getStopPropagetion:function(event){
                if(event.stopPropagation){
                    return event.stopPropagation();
                }
                else{
                    return event.cancelBubble=true;
                }
            },
            //阻止事件默認行爲
            getPreventDefault:function(event){
                if(event.preventDefault){
                    return event.preventDefault();
                }
                else{
                    return event.returnValue=false;
                }
            }
        }
        eventUtil.addHandler(btn3,'click', message);
        eventUtil.removeHandler(btn3,'click', message);

事件對象

在觸發DOM上的事件都會產生一個對象。
事件對象event

1. DOM中的事件對象。

   （1）type屬性，獲取事件類型。event.type
   （2）target屬性，獲取事件目標。
   （3）stopPropagation（）方法，用於阻止事件冒泡。
   （4）preventDefault（）方法，阻止事件的默認行爲。

   2.IE中的事件對象

   （1）type屬性，獲取事件對象
   （2）srcElement屬性，獲取事件對象
   （3）cancelBubble=true方法，用於阻止事件冒泡
   （4）returnValue=false ，阻止事件的默認行爲。

事件類型

鼠標事件
MouseEvent對象

屬性 //鼠標事件發生時，鼠標的位置
    -clientX,clientY //和頁面的距離
    -screntX,screntY //和屏幕的距離
    -ctrlKey,shiftKey,altKey,metaKey //當事件觸發是，鍵盤是按下的，則爲true
    -button(0,1,2)

觸發順序

//一個窗口拖動的例子
//封裝一個獲取元素的方法，防止出現IE不兼容等問題
function getByClass(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;
}

window.onload = drag;


//在標題區按下
function drag(){
    var oTitile = getByClass("login_logo_webqq","loginPanel")[0];
    //移動
    oTitile.onmousedown = fnDown;
    //關閉窗口
    var oClose = document.getElementById("ui_boxyClose");
    oClose.onclick = function(){
        document.getElementById("loginPanel").style.display="none";
    }

}

//在頁面中移動
//釋放鼠標時中止移動
function fnDown(){
    var oDrag =  document.getElementById("loginPanel");

    document.onmousemove = function(event){
        event = event || window.event;//瀏覽器兼容
        oDrag.style.left = event.clientX + "px";
        oDrag.style.top = event.clientY + "px";
    }
    //釋放鼠標
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup - null;
    }

}

• 鍵盤事件

事件代理

事件代理在JS世界中一個很是有用也頗有趣的功能。當咱們須要對不少元素添加事件的時候，能夠經過將事件添加到它們的父節點而將事件委託給父節點來觸發處理函數。這主要得益於瀏覽器的事件冒泡機制

例子
//html
<ul id="list">
  <li id="item1">item1</li>
  <li id="item2">item2</li>
  <li id="item3">item3</li>
  <li id="item4">item4</li>
</ul>
//js
window.onload=function(){
  var ulNode=document.getElementById("list");
  ulNode.addEventListener('click',function(e){
       if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判斷目標事件是否爲li*/
         alert(e.target.innerHTML);
       }
     },false);
}

爲父節點添加一個click事件，當子節點被點擊的時候，click事件會從子節點開始向上冒泡。父節點捕獲到事件以後，經過判斷e.target.nodeName來判斷是否爲咱們須要處理的節點。而且經過e.target拿到了被點擊的Li節點。從而能夠獲取到相應的信息，並做處理