DOM事件基礎（二）

 Event對象

 

Event對象實際上是一個事件處理程序的參數，當調用事件時，咱們只須要將其傳入事件函數就能夠獲取。代碼以下：

function getEvent(event){

event = event || window.event;

}

 

上面的事件是將函數傳入一個名爲Event的參數做爲事件對象,同事作了瀏覽器的兼容處理.

在IE8之前版本之中,經過設置屬性註冊事件處理程序時,調用的時候並未傳遞事件對象,須要經過全局對象

window.event來獲取,因此上述代碼中咱們使用||來作判斷若是event對象存在則使用event，不存在則使用window.event。

 

1.stopPropagation

 

stopPropagation方法主要用於阻止事件的進一步傳播，好比阻止事件繼續向上層冒泡

 

function getEvent(event){

event = event||window.event;

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble = ture;

}

}

 

cancelBubble是IE事件對象的一個屬性，設置這個屬性爲true能阻止事件進一步傳播。

 

   2.preventDefault

 

preventDefault方法用於取消事件的默認操做，好比a連接的跳轉行爲和表單自動提交行爲就能夠用preventDefault方法來取消。

代碼以下：

<a id="go" href=" https://www.baidu.com/">禁止跳轉</a>

var go = document.getElementById('go');

 

function goFn(event) {

    event.preventDefault();

 

    console.log('我沒有跳轉！');

}

 

go.addEventListener('click', goFn, false);

 

經過preventDefault，咱們成功阻止了a連接的跳轉行爲。不過，在IE9以前的瀏覽器中須要設置returnValue屬性爲false來實現。以下：

function gofn(event){

event=event||window.event;

if(event.preventDefault){

event.preventDefault();

}else{

event.returnValue = false;

}

console.log("沒有跳轉");

}

 

除了以上Event對象的兩個主要方法，當前DOM事件規範草案在Event對象上還定義了另外一個方法，命名爲stopImmediatePropagation。

 

3.stopImmediatePropagation

 

和stopPropagation相比，stopImmediatePropagation一樣能夠阻止事件的傳播，不一樣點在於其還能夠把這個元素綁定的同類型事件也阻止了。

如：

 

var go = document.getElementById('go');

 

function goFn(event) {

    event.preventDefault();

    event.stopImmediatePropagation(); // 阻止事件冒泡並阻止同類型事件

 

    console.log('我沒有跳轉！');

}

 

function goFn2(event) {

    console.log('我是同類型事件！');

}

 

go.addEventListener('click', goFn, false);

go.addEventListener('click', goFn2, false);

 

咱們在a連接上繼續加了一個點擊事件，若是咱們在goFn方法中添加了stopImmediatePropagation方法，那麼goFn2方法將不會被執行，同時也不會將點擊事件冒泡至上層。

 

須要注意的是，stopImmediatePropagation目前一部分瀏覽器尚不支持，可是像jQuery這樣的庫封裝了跨平臺的stopImmediatePropagation方法

 

1.type屬性

 

經過type咱們能夠獲取事件發生的類型，好比點擊事件咱們獲取的是'click'字符串。

 

var go = document.getElementById("go");

function gofn(event){

console.log(event.type);//輸出click

}

go.addEventListener("click",gofn,false);

 

2.target屬性

 

target屬性主要用於獲取事件的目標對象，好比咱們點擊a標籤獲取的是a標籤的html對象。

 

var go = document.getElementById('go');

 

function goFn(event) {

    var target = event.target;

 

    console.log(target === go) // 返回true

}

 

go.addEventListener('click', goFn, false);

 

在IE8及以前版本，咱們須要使用srcElement而非target。兼容方案以下：

 

function goFn(event) {

    var event = event || window.event,    

        target = event.target || event.srcElement;

 

    console.log(target === go) // 返回true

}

 

3. 鼠標事件屬性

 

在用鼠標觸發事件時，主要的事件屬性包含鼠標的位置和按鍵的狀態，

好比：clientX和clientY指定了鼠標在窗口座標中的位置，button和which指定了按下的鼠標鍵是哪一個。

 

function moveFn(event) {

    console.log(event.screenX) // 獲取鼠標基於屏幕的X軸座標

    console.log(event.screenY) // 獲取鼠標基於屏幕的Y軸座標

    console.log(event.clientX) // 獲取鼠標基於瀏覽器窗口的X軸座標

    console.log(event.clientY) // 獲取鼠標基於瀏覽器窗口的Y軸座標

    console.log(event.pageX) // 獲取鼠標基於文檔的X軸座標

    console.log(event.pageY) // 獲取鼠標基於文檔的Y軸座標

}

 

function clickFn(event) {

    console.log(event.button) // 獲取鼠標按下的鍵。非IE瀏覽器中0爲鼠標左鍵，1爲鼠標中鍵，2爲鼠標右鍵

    console.log(event.which) // 獲取指定事件上哪一個鍵盤鍵或鼠標按鈕被按下

}

 

document.addEventListener('mouseover', moveFn, false);

document.addEventListener('click', clickFn, false);

 

4.鍵盤事件屬性

 

在用鍵盤觸發事件時，主要的事件屬性包含鍵盤的按鍵keyCode和是否按下特殊鍵，

好比：keyCode指定了按下鍵的鍵碼值，ctrlKey指定是否按下了ctrl鍵。

 

function keyFn(event) {

    console.log(event.keyCode); // 獲取按下鍵的鍵碼值

    console.log(event.ctrlKey); // 獲取是否按下了ctrl鍵

    console.log(event.shiftKey); // 獲取是否按下了shift鍵

    console.log(event.altKey); // 獲取是否按下了alt鍵

    console.log(event.metaKey); // 獲取是否按下了meta鍵

}

 

document.addEventListener('keyup', keyFn, false);

 

以上的這些知識點只是一些比較基礎的知識 更多知識 隨後更新

 

備註：文本參考自《Javascript權威指南》一書及慕課網教程《DOM事件揭祕》。