Web前端基礎知識

請多指教。

今天來講講關於默認事件，事件冒泡，事件委託，鍵盤事件，鼠標事件。

1.默認事件：瀏覽器都帶有很多默認的事件，如：鼠標左鍵的默認事件：按下后拖拽圖片或選中單選框或複選框；鼠標右鍵的默認事件：彈出瀏覽器的屬性菜單。

通常我們要阻止他，使用：e.preventDefault();  

左鍵阻止：這只能阻止左鍵的不能阻止右鍵

<input type="checkbox" id="btn">
btn.onmousedown=function(e){
//e.button是判斷是右鍵還是左鍵：0為左，1為中，2為右
    if(e.button==0  ){
        e.preventDefault();
    }

}

右鍵阻止：oncontextmenu:代表的是鼠標右鍵事件

dom.oncontextmenu=function (e) {
    e.preventDefault();
}

2.事件冒泡：事件發生后（從里到外或從外到里）的傳播。

很多時候我們都要阻止它：e.stopPropagation();或e.cancelBubble=true;

3.事件委託：就是利用事件冒泡，只指定一個事件處理程序，就可以管理這一類的事件。相當於將他全部丟給它的父元素即可。

4.鍵盤事件：

                 keydown:當用戶按下鍵盤上的任意鍵時觸發，若是按住不放會持續觸發此事件；

                 keyup:當用戶釋放鍵盤上的鍵時觸發；

                keypress：當用戶按下鍵盤上的字符鍵時（除去shift,alt,ctrl之類的鍵），若是按住不放會持續觸發此事件；

常用於判斷按下了什麼鍵：通過event.keyCode;

實例：判斷是否按下了enter鍵：

document.onkeydown=function(e){
if(e.keyCode==13){
alert("按下的鍵時Enter鍵")
}
}

5.鼠標事件：常用的就是拖拽某個元素時，要獲取鼠標的位置。

在使用它前要考慮瀏覽器兼容：e=e||window.event;

在使用它之前要分清楚：clientX，pageX，offsetX，screenX三者的區別：

clientX:點擊位置距離body的可視區域（不包括滾動條隱藏的部分）的距離；

pageX：點擊位置距離body的距離（包括滾動條隱藏的部分）;

offsetX：點擊位置距離父元素的邊緣的距離；

screenX：點擊位置距離當前電腦屏幕的距離；

判斷是觸發了哪個鼠標按鈕：e.button;

<input type="checkbox" id="btn">
btn.onmousedown=function(e){
//e.button是判斷是右鍵還是左鍵：0為左，1為中，2為右
    if(e.button==0  ){
       alert("左鍵"); 
    }
    else if(e.button==1){
       alert("中鍵"); 
    }
    else if(e.button==2){
       alert("右鍵"); 
    }

}