1.事件驅動模型:

注:可以看做使用者點選某個功能或者按鈕,來產生一個onclick事件來觸發某個函式;

2.事件驅動要素:

    1.事件源;
    2.事件(行為);
        例如:
            滑鼠點選;
            滑鼠懸浮於某個頁面的某個熱點之上;
            確認表單;
            在表單中選取輸入框;

3.事件分類:

4.監聽器:

1.IE中
        element.attachEvent(event, function); 新增

        element.detachEvent(event, function);//刪除

  2.chrom ff
        element.addEventListener(event, function, useCapture);//新增

        element.removeEventListener(event, function, useCapture);//刪除
 

5.事件物件(event物件)

    注:1.當事件發生時,只能在事件函式內部訪問物件;
       2.處理函式後會自動銷燬;    
           //event物件
        btn.onclick = function (e) {
            var ev = e || window.event;    //相容性
       }
        var wrap = document.getElementById("wrap");
        wrap.onmousemove = function(e) {
            var ev = e || window.event;
            this.innerHTML = ev.type;
            //距離瀏覽器
            this.innerText = ev.clientX + " " + ev.clientY;
            //距離螢幕
            this.innerHTML = ev.screenX + " " + ev.screenY;
            //距離事件源
            this.innerHTML = ev.offsetX + " " + ev.offsetY;
            this.innerHTML = ev.layerX + " " + ev.layerY;

        };
 

6.keycod事件 鍵盤碼:

        document.body.onkeydown = function(e) {
            var ev = e || window.event;
            //獲取鍵盤碼
           wrap.innerHTML = ev.keyCode;
            //altKey
               wrap.innerHTML = ev.altKey;
            //ctrlKey
            wrap.innerHTML = ev.ctrlKey;
            //shiftKey
            wrap.innerHTML = ev.shiftKey;
            console.log(ev.type);

        回車 = 13; alt = 18; 上 = 38; 右 = 39; 

        左 = 37; 下 = 40; Ctrl =17; shift = 16;
    當多個事件定同一個函式時,event.type 來判斷在哪個事件用;