DOM事件處理程序-事件對象-鍵盤事件

事件流：

事件流--描述的是從頁面中接受事件的順序

 

IE  ---事件冒泡流：即事件最開始由最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐級向上傳播至最不具體的那個節點（文檔）。

Netscape  ---事件捕獲流：不太具體的節點應該更早接收到事件，而最具體的節點最後接收到事件。

 

使用事件處理程序：

1. HTML事件處理程序

<input type="button" value="按鈕" id="btn" onclick="alert('hello')"/>
<input type="button" value="按鈕" id="btn" onclick="showMessage()"/>
<script>
    function showMessages(){
        alert('hello world!');
    }
</script>
// HTML事件的缺點：
// HTML和JS代碼緊密的耦合在一塊兒

2. DOM0級事件處理程序

　　較傳統的方式：把一個函數賦值給一個事件的處理程序屬性

　　（用的比較多的方法     簡單     跨瀏覽器的優點）

<input type="button" value="按鈕2" id="btn2"/>
<script>
    var btn2 = document.getElementById('btn2'); // 取btn2按鈕對象
    btn2.onclick = function(){
        alert('這是經過DOM0級添加的事件！');
    }
    btn2.onclick = null; // 刪除onclick屬性
</script>

// 沒有HTML事件處理程序的缺點

3. DOM2級事件處理程序

　　DOM2級事件定義了兩個方法：

　　　　用於處理指定和刪除事件處理程序的操做

　　　　addEventListener()和removeEventListner()。

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

<input type="button" value="按鈕3" id="btn3"/>
<script>
    function showMes(){
        alert('hello world !')
    }
    var btn3 = document.getElementById('btn3'); 
    // 能夠在一個按鈕上添加多個事件
    btn3.addEventListener('click',showMes,false);
    btn3.addEventListener('click',function(){
        alert(this.value);
    },false);
    // 刪除事件
    // btn3.removeEventListener('click',showMes,false);
</script>

4. IE事件處理程序

attachEvent()添加事件

detachEvent()刪除事件

　　接收相同的兩個參數：事件處理程序的名稱和事件處理程序的函數

　　（不使用第三個參數的緣由：IE8以及更早的瀏覽器版本只支持事件冒泡！）

<input type="button" value="按鈕3" id="btn3" />
<script>
    function showMes(){
        alert('hello world !');
    }
    var btn3 = document.getElementById('btn3'); 
    btn3.attachEvent('onclick',showMes);
    btn3.detachEvent('onclick',showMes);
</script>

5. 跨瀏覽器的事件處理程序

<input type="button" value="按鈕3" id="btn3" />
<script type="text/javascript">
function showMes(){
    alert("hello world!");
}
// 跨瀏覽事件處理程序
var eventUtil = {
    // 添加句柄 怎麼給元素添加事件
    addHandler:function(element,type,handler){
        if(element.addEventListener){     // 判斷的是DOM2級
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){     // IE事件處理程序判斷
            element.attachEvent("on" + type,handler);
        }else{     // DOM0級處理程序判斷
            element["on" + type] = handler;
        }
    },
    // 刪除句柄 怎麼給元素刪除事件
      removeHandler:function(element,type,handler){
        if(element.removeEventListener){     // 判斷的是DOM2級
            element.removeEventListener(type,handler,false);
        }else if(element.tetachEvent){     // IE事件處理程序判斷
            element.tetachEvent("on" + type,handler);
        }else{     // DOM0級處理程序判斷
            element["on" + type] = null;
        }
    }
}
eventUtil.addHandler(btn3,'click',showMes);
eventUtil.removeHandler(btn3,'click',showMes);
</script>

 

 

事件對象：

什麼是事件對象？在觸發DOM上的事件時都會產生一個對象

事件對象event

1. DOM中的事件對象

　　1）type屬性 用於獲取事件類型

　　2）target屬性 用於獲取事件目標

　　3）stopPropagation()方法 用於阻止事件冒泡

　　4）preventDefault()方法 阻止事件的默認行爲

function showMes(event){
    alert(event.type);  // click
}
function showMes(event){
    alert(event.target);  // 這個事件加在什麼目標上（那個元素的）
    alert(event.target.nodeName);  // 目標節點名稱
}

2. IE中的事件對象

　　1）type屬性 用於獲取事件類型

　　2）srcElement屬性 用於獲取事件的目標

　　3）cancelBubble屬性 用於阻止事件冒泡

　　　　　　設置爲true表示阻止冒泡　　　　設置false表示不阻止冒泡

　　4）returnValue屬性 用於阻止事件的默認行爲

　　　　　　設置爲true表示阻止事件的默認行爲

function showMes(event){
    event = event || window.event;     // IE8之前的瀏覽器須要用window.event
    var ele = event.target || event.srcElement;
    alert(ele);
}

// 跨瀏覽事件處理程序
var eventUtil = {
    // 怎麼獲取兼容兩個瀏覽器的事件對象
    getEvent:function(event){
        return event?event:window.event;
    },
    // 怎麼獲取事件的類型
    getType:function(event){
        return event.type;
    },
    // 怎麼獲取事件來自於哪一個元素
    getElement:function(event){
        return event.target || event.srcElement;
    },
    // 怎麼阻止取消事件的默認行爲
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    // 怎麼阻止事件冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){  // 以屬性的方式來判斷
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
}

 

 

 

鍵盤事件：

keyDown：當用戶按下鍵盤上的任意鍵時觸發，並且若是按住不放的話，會重複觸發此事件

keyPress：當用戶按下鍵盤上的字符鍵時觸發，並且若是按住不放的話，會重複觸發此事件

keyUp：當用戶釋放鍵盤上的鍵時觸發

event對象上的keyCoden屬性用於獲得鍵盤對應鍵的鍵碼值

console.log(event.keyCode); // 打印keyCode屬性