事件處理詳解

之前做的多是手機端頁面，監聽事件也一直是 addeventlistener ，現代瀏覽器基本都支援addeventlistener ，除了萬惡的ie8及更低版本ie。雖說不用太管ie8了（個人愚見），但是還是有必要整理下之前相容性的處理方式

在html標籤中直接給屬性設定處理程式。html中加入了js**，因為需要行為、樣式、結構分離，這種方式現在已經淘汰，就不深入**了。

1
<
button 
onclick
="alert('html事件處理！')"
>點我
button
>

通過元素物件的事件屬性來繫結處理程式。先看栗子

<
a href
=""class
="a1"
>快點選我！
a>

document.queryselector('.a1').onclick = function
()

先獲取到元素a，在給元素的點選事件屬性onclick繫結處理程式。

這種方式的特點：

1、簡單易用，相容性良好，基本所有瀏覽器都支援

2、只能繫結乙個處理程式，重複繫結會覆蓋。如果給a的onclick屬性再繫結乙個處理程式，那麼現在的這個就會被覆蓋掉

3、只會在冒泡階段觸發

取消繫結也非常簡單，直接設為null就可以了。

document.queryselector('.a1').onclick = null; //取消繫結

通過事件方法來繫結和解綁處理程式。同樣看個栗子

<
a href
=""class
="a2"
>點選我！
a>

document.queryselector('.a2').addeventlistener('click', function
(e), 
false
) document.queryselector('.a2').addeventlistener('click', function
(e), 
false)

addeventlistener(eventname,listener,usecapture) 方式可以為事件繫結處理程式，第乙個引數為事件型別（不帶on）；第二個引數是處理程式；第三個引數可指定哪個階段觸發，false對應冒泡階段、true物件捕獲階段（預設false），部分低版本瀏覽器要求這個引數不能為空，所以最好還是帶上。

這種方式的特點：

1、可為同乙個事件繫結多個處理程式，會依次觸發。多次繫結同乙個處理程式，只會生效一次

2、可指定觸發的階段，捕獲階段或者冒泡階段

3、相容ie8 - 之外的其他瀏覽器

解綁的方式為：element.removeeventlistener(eventname,listener,usecapture);和繫結的用法一致

ie8- 有一套自己的事件處理方法

繫結：element.attachevent(eventnamewithon,listener)

解綁：element.detachevent(eventnamewithon,listener)

document.queryselector('.a2').attachevent('onclick', function
(e))

特點：1、事件型別帶on (eg：onclick)

2、只能在冒泡階段觸發

3、ie10 - ie5都支援該方法

兩種方式的差別在事件型別和第三個引數，所以可以做一些處理，封裝相容性處理的方式

//
通用方式
//繫結
function
addevent(targetelement,eventname,listener,usecapture)
else
if(targetelement.attachevent)
else
}//解綁
function
removeevent(targetelement,eventname,listener,usecapture)
else
if(targetelement.attachevent)
else
}

測試一下使用，在ie8及其他瀏覽器都可以正常使用。

addevent(document.queryselector('.a2'),'click',test,false
) 
function
test(e)

不同的方式獲取event物件的方式也不同

attachevent繫結：通過 window.event獲取event物件

其他方式（dom0和addeventlistener）：處理函式傳參直接獲取

function
test(e)

attachevent繫結的方式，處理程式內部this指向window。想要獲取元素物件可以通過 window.event.srcelement

其他方式的this指向觸發元素。同樣的也可以通過 event.target獲取

e = e || window.event;  //
event物件
var target = e.target || e.srcelement; //
觸發物件

通過event物件的方式取消預設行為：

event.preventdefault() //其他瀏覽器

event.returnvalue = false //ie8-

dom0級繫結的還可以直接 return false 來取消預設行為，所有瀏覽器都支援

event物件阻止傳播：

event.stoppropagation() //其他瀏覽器

event.cancelbubble = true //ie8 -

一般可以這樣寫

e.stoppropagation ? e.stoppropagation() : e.cancelbubble = true;  //
阻止傳播
e.preventdefault ? e.preventdefault() : e.returnvalue = false; //
取消預設行為

如果多個元素的處理程式類同，如果每個都繫結一次會很繁瑣和低效，這時可以利用冒泡的原理（他們都會冒泡到父元素）直接在父元素上繫結事件。即為事件委託

點選我1！

點選我2！

點選我3！

addevent(document.queryselector('.item-3'),'click',function
(e) })

本例中，想要實現點選按鈕輸出按鈕文字。如果給三個按鈕分別繫結事件會不會太傻。所以直接繫結了父元素，事件觸發時，判斷觸發物件是否是button標籤，如果是，則輸出文字。

事件處理詳解

Objective C 事件處理詳解

UITouch事件處理過程詳解

Spring的Event事件處理使用詳解

事件處理詳解

Objective C 事件處理 詳解

UITouch事件處理過程詳解

Spring的Event事件處理使用詳解

相關推薦

Objective C 事件處理詳解