事件

（一）什麼是事件

JavaScript 使咱們有能力建立動態頁面。事件是能夠被 JavaScript 偵測到的行爲。

網頁中的每一個元素均可以產生某些能夠觸發 JavaScript 函數的事件。比方說，咱們能夠在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。

事件一般與函數配合使用，當事件發生時函數纔會執行

（二）常見事件

onabort　　圖像的加載被中斷

onblur　　元素失去焦點

onchange　　元素髮生改變且失去焦點

onclick　　當用戶點擊某個對象時調用的句柄

ondblick　　當用戶雙擊某個對象時調用的事件句柄

onerror　　在加載文檔或圖像時發生錯誤

onfocus　　元素得到焦點

onkeydown　　某個鍵盤按鍵被按下（按下任意鍵）

onkeypress　　某個鍵盤按鍵按下並鬆開（按下字符鍵）

onkeyup　　　　某個鍵盤按鍵被鬆開

onload　　　　一張頁面或一幅圖像完成加載

onmousedown　　鼠標按鈕被按下

onmousemove　　鼠標被移動

onmouseout　　　鼠標從某元素移開

onmouseover　　鼠標移到某元素之上

onmouseup　　鼠標按鍵被鬆開

onreset　　　　重置按鈕被點擊

onresize　　　　窗口或框架被從新調整大小

onselect　　　　文本被選中

onsubmit　　　　確認按鈕被點擊

onunload　　　　用戶退出頁面

(三)     event:

事件對象 , 當一個事件發生的時候，和當前這個對象發生的這個事件有關的一些詳細的信息都會被臨時保存到一個指定地方-----event對象，供咱們在須要的調用。

注：事件對象必須在一個事件調用的函數裏面使用纔有內容

1. 兼容：

1、ie/chrome : event是一個內置全局對象

2、標準下(IE9及以上，chrome) : 事件對象是經過事件函數的第一個參數傳入

 

2. 事件函數：

事件調用的函數，一個函數是否是事件函數，不在定義的決定，而是取決於這個調用的時候

1)   

document.onclick = function() {

alert(event);

};

 

function fn1(ev) {

alert( event );

}

2)   

fn1();  // undefined，由於不是事件調用

3)   

document.onclick = fn1; //正常彈出，由於是事件調用的。

3.兼容處理

var e=e || window.event

 

(四)事件流

三個階段：事件捕獲階段　　處於目標階段　　事件冒泡階段

1.阻止冒泡;

標準;event.stopPropagation()

IE:event.cancelBubble=true

跨瀏覽器兼容阻止冒泡

function stopPropagation(ev) {

if(ev.stopPropagation) {

    ev.stopPropagation();

} else {

    ev.cancelBubble = true;

}

2.阻止默認行爲

標準： event.preventDefault()     prevent（阻止）

IE: event.returnValue=false          return false   

// 跨瀏覽器兼容阻止默認行爲

function preventDefault(ev) {

if(ev.preventDefault) {

    ev.preventDefault();

} else {

    ev.returnValue = false;

}

}

1. 事件冒泡 :

 

 

 

 

 

 

 

事件冒泡的解釋 : 當一個元素接收到事件的時候，會把他接收到的全部傳播給他的父級，一直到頂層window。這種機制咱們稱之爲」事件冒泡機制」

若是這個元素它有事件函數綁定，哪麼在冒泡時，就會執行它綁定的函數。若是它沒有事件函數綁定，也不妨礙它接收它的子級傳過來的事件，以及它向它的父級傳播事件。

 

(一)     事件處理程序：

 

1. HTML事件處理程序:

定義：在HTML中綁定的事件。

缺點：不能實現行爲和結構的分離。會致使內存的高度泄露；

 

 

2. DOM0事件處理程序

優勢：簡單， 跨瀏覽器兼容。

缺點： 不能同時綁定多個事件。

添加（綁定）：

語法：對象.on事件類型=fn;

說明：

fn 匿名函數也能夠是有名函數；

btn.onclick=function(){}

btn.onclick=say  只寫函數名

刪除

語法：對象.on事件類型=null

 

 

3. DOM2事件處理程序

優勢：同時綁定多個事件處理程序。

添加(綁定）語法：對象.addEventListener(事件名，函數，布爾值) 

false 冒泡階段 true 捕獲階段

刪除(綁定）語法：對象.removeEventListener(參數與添加的參數徹底相同) //不能刪除匿名函數

 

 

4. IE事件處理程序：

優勢：同時綁定多個事件處理程序。

添加語法： 對象.attachEvent(on+事件名,函數)

刪除語法： 對象.detachEvent(on+事件名，函數)  參數與添加的的時候徹底同樣

 

(二)     事件綁定的第二種形式 :

1. 第一種綁定形式，給一個對象綁定一個事件處理函數的第一種形式

//obj.onclick = fn;

演示文檔：

function fn1() {

   alert(this);

}

function fn2() {

   alert(2);

}

document.onclick = fn1;

document.onclick = fn2;  //會覆蓋前面綁定fn1

 

2. 給一個對象的同一個事件綁定多個不一樣的函數

給一個元素綁定事件函數的第二種形式

ie：obj.attachEvent(事件名稱，事件函數);

   1.沒有捕獲

   2.事件名稱有on

   3.事件函數執行的順序：標準ie-》正序   非標準ie-》倒序

   4.this指向window

標準：obj.addEventListener(事件名稱，事件函數，是否捕獲);

   1.有捕獲

   2.事件名稱沒有on

   3.事件執行的順序是正序

   4.this是觸發該事件的對象

 

非標準的IE沒有捕獲，可是標準的IE有捕獲，即標準的IE有兩套，若是用的是attachEvent就沒有捕獲，而用addEventListener就有捕獲。

 

演示文檔：

IE（非標準）

document.attachEvent('onclick', fn1);

document.attachEvent('onclick', fn2);

 

標準 （包括標準 IE）

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

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

 

注意這兩種形式的區別：

 

 

Bind方法的封裝：

function bind(obj, evname, fn) {

   if (obj.addEventListener) {

     obj.addEventListener(evname, fn, false);

   } else {

     obj.attachEvent('on' + evname, function() {

        fn.call(obj);

     });

   }

}

 

bind(document, 'click', fn1);

bind(document, 'click', fn2);

 

(三)     事件的取消

 

咱們有兩種形式的綁定，哪麼對應的，也有兩種形式的取消：

 

第一種事件綁定形式的取消：

演示文檔：

function fn1() {

   alert(1);

}

function fn2() {

   alert(2);

}

document.onclick = fn1;

document.onclick = null; //取消，什麼都不執行，由於你取消了

 

第二種，分ie和標準兩種形式：

ie : obj.detachEvent(事件名稱，事件函數);

document.attachEvent('onclick', fn1);

document.attachEvent('onclick', fn2);

document.detachEvent('onclick', fn1);

這時，點擊只出2，1沒了，由於你取消了。

 

標準 : obj.removeEventListener(事件名稱，事件函數，是否捕獲);

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

document.addEventListener('click', fn1, true);

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

document.removeEventListener('click', fn1, false); // 取消了1出去的

(一)     瀏覽器的默認行爲

 

好比：右鍵，按空格向下滾等等。

 

事件默認行爲：當一個事件發生的時候瀏覽器本身會默認作的事情。

怎麼阻止？分兩步：

第一步：當前這個行爲是什麼事件觸發的。

第二步：而後在這個事件的處理函數中使用preventDefault(ev);

 

 

如：阻止了按空格向下滾動

document.onkeydown = function() {

   preventDefault(ev);

}

 

 

右鍵菜單事件

如：oncontextmenu : 右鍵菜單事件，當右鍵菜單（環境菜單）顯示出來的時候觸發

document.oncontextmenu = function() {

   alert(1)

   return false;

}

 

案例：自定義右鍵菜單.html

 

(二)     鼠標滾輪事件：

 

ie/chrome : onmousewheel

     event.wheelDelta

        上：120

        下：-120

Wheel（輪）

Delta（三角洲，河口）

firefox : DOMMouseScroll 必須用addEventListener

     event.detail

        上：-3

        下：3

在火狐下，爲了作IE的兼容，須要判斷一下元素有沒有addEventListener這個屬性。

 

案例：鼠標滾輪事件 1.html

 

封裝：getWheelDelta

 

阻止事件的兩種方式：

若是是普通的形式，用return false來阻止。

若是是用addEventListener，就要用ev.preventDefault();

IE下面的attachEvent，它用的仍是return fasle。

 

練習：

一、經過鼠標滾輪控制價格

二、經過鼠標滾輪控制圖片大小。

(三)     事件類型

 

UI事件：不必定與用戶操做有關

load  unload scroll  error  resize  select

 

 

焦點事件:

當元素得到或失去焦點時觸發；

blur ：在元素失去焦點時觸發。這個事件不會冒泡；全部瀏覽器都支持它。

focus ：在元素得到焦點時觸發。這個事件不會冒泡；全部瀏覽器都支持它。

change：在元素失去焦點，而且當前元素內容有所改變的時候，觸發此事件；

 

鼠標事件：

鼠標事件，當用戶經過鼠標在頁面上執行操做時觸發；

click

dblclick

mousedown

mouseup

mousemove

mouseover

mouseout

mouseenter在鼠標光標從元素外部首次移動到元素範圍以內時觸發。這個事件不冒泡，並且在光標移動到後代元素上不會觸發。

mouseleave在位於元素上方的鼠標光標移動到元素範圍以外時觸發。這個事件不冒泡，並且在光標移動到後代元素上不會觸發。

 

 

 

 

鍵盤事件：

keydown     按下任意鍵時，觸發

keypress    按下字母鍵時候，觸發

keyup       釋放按鍵的時候，觸發

keyCode  獲取按鍵的ascii碼 

回車鍵    13

空格鍵     32

A-Z        65-

0-9        48

左上右下   37  38 39  40

 

 

 

表單：

submit

reset

change

select

 

 

滾輪事件，當使用鼠標滾輪（或相似設備）時觸發；

文本事件，當在文檔中輸入文本時觸發；

鍵盤事件，當用戶經過鍵盤在頁面上執行操做時觸發；

合成事件，當爲 IME（Input Method Editor，輸入法編輯器）輸入字符時觸發；

變更（mutation）事件，當底層 DOM 結構發生變化時觸發。

 

 

(四)     事件委託：

 

事件委託，也叫事件代理：利用冒泡的原理，把事件加到父級或者父父級上，觸發執行效果。

好處：

一、提升性能

二、新添加的元素，還會有以前的事件

三、解決內存泄露或者節省內存

 

事件源：

事件目標：你實際操做的目標對象，不必定是你綁定事件的對象

event對象：無論在那個事件中，只要你操做的那個元素就是事件源。（有兼容性的問題）因此要作兼容

ie下：event.srcElement

標準：event.target

 

var ev = ev || event;

var target = ev.target || ev.srcElement;

 

事件源也能夠經過nodeName 獲得當前這個標籤的標籤名。即

target.nodeName