JavaScript零基礎入門——（十三）JavaScript的事件

JavaScript零基礎入門——（十三）JavaScript的事件 

你們好，歡迎回到咱們的JavaScript零基礎入門。上一節課，咱們瞭解了JavaScript定時器，也演示了一些比較經典的例子，其實咱們已經用到了一些JavaScript的事件，這節課，咱們一塊兒來認識一下JavaScript的事件。

在JavaScript中，咱們經過event對象來獲取事件的詳細信息，如鍵盤按鍵、鼠標位置等。但在部分瀏覽器上，是不支持event對象的，咱們能夠經過方法參數接收event來解決，可是這種方法在IE6-8又是不兼容的。不用擔憂，咱們講過或邏輯，能夠用或邏輯解決，以下：

document.onclick=function(e){
    var ev = e||event;
}

在JS基礎中，事件主要是指HTML事件、鼠標事件和鍵盤事件，咱們分別來講一說。

HTML事件，咱們經常使用的有如下幾種：

• onload——頁面加載後觸發
• onunload——頁面釋放時觸發
• onfocus——元素得到焦點時觸發
• onblur——元素失去焦點時觸發
• onchange——用戶改變文本框或文本域內容時觸發
• onresize——窗口或框架尺寸被改變時觸發

鼠標事件，咱們經常使用的是如下幾種：

• onclick——鼠標單擊時觸發
• ondblclick——鼠標雙擊的時候觸發
• onmousedown——鼠標按下的時候觸發
• onmouseup——鼠標鬆開（彈起）的時候觸發
• onmouseover——鼠標移入時觸發
• onmouseout——鼠標移出時觸發
• onmousemove——鼠標移動的時候觸發
• oncontextmenu——鼠標右鍵的時候觸發

鍵盤事件，咱們經常使用的有如下幾種：

• onkeydown——鍵盤按鍵按下時觸發
• onkeyup——鍵盤按鍵鬆開（彈起）時觸發
• onkeypress——鍵盤按鍵按住時觸發

除了瀏覽器的默認行爲（如鼠標右鍵點擊）外，咱們自定義的事件，是須要作事件綁定的。而事件綁定呢，又是一個有兼容性的問題。在IE6-8上面呢，咱們用attachEvent來綁帶事件，用detachEvent來解綁事件，而在chrome和Firefox上，咱們只能用addEventListener和removeEventListener來綁定和解綁事件。所以，咱們仍是會用或邏輯來解決這個問題，以綁定爲例：

function addEvent(element, event, func) {
    if (document.attachEvent) {
        element.attachEvent('on' + event, func);
    } else {
        element.addEventListener(event, func);
    }
}

而針對默認行爲，咱們實際上是也是能夠阻止的，一般給個return false就阻止掉了。

在事件中呢，有一種被稱爲事件流的現象，事件冒泡就是其中一種最經典的呈現，所謂事件冒泡，就是元素的事件觸發後，會傳遞給其父級直到document。若是要取消冒泡，就得將cancelBabble屬性設爲true。

以上就是咱們這節課的理論知識，請你們移步至公衆號看視頻，我會經過演示讓你們有一個更深的印象。

好了，這節課就講這麼多，下一節課，咱們來了解一下JavaScript的BOM，而後咱們的JavaScript基礎課就基本結束了，後邊有時間咱們繼續推動階課程，例如動畫、面向對象等等。

                                                                                                       

若是想跟着振丹繼續學習，能夠微信關注【振丹敲代碼】（微信號：JandenCoding）

新博文微信同步推送，還附有講解視頻哦~

也可直接掃描下方二維碼關注。