js的事件處理

事件就是用戶或瀏覽器自身執(zhí)行的某種動作。比如說 click，mouseover，都是事件的名字。而相應(yīng)某個事件的函數(shù)就叫事件處理程序（或事件偵聽器）。為事件指定處理程序的方式有好幾種。

事件的作用范圍

//html
<div id="wrap">
    <div id="outer">
      <div id="inner"></div>
    </div>
  </div>
//css
#wrap {
  width: 200px;
  height: 200px;
  background: pink;
}
#outer {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: #eeddff;
}
#inner {
  position: relative;
  top: 25px;
  left:25px;
  width: 50px;
  height: 50px;
  background: #44ddff;
}
//js
var wrap = document.getElementById('wrap');
wrap.addEventListener('click',function(){
  alert('789');
},false);
效果圖

當(dāng)點擊粉色塊和粉色外淺藍(lán)色部分的時候,都彈出了789,而淺藍(lán)色部分是嵌套在wrap元素之內(nèi)的元素,故可得出結(jié)論,當(dāng)元素注冊了事件,此事件的作用范圍為:1.元素自己所占頁面空間部分加嵌套元素所占空間范圍(若嵌套元素覆蓋在容器元素上，則事件的作用范圍為容器元素自身所占空間大小)

事件流

事件流描述的是從頁面中接受事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。

冒泡事件

IE的事件流叫做事件冒泡（event bubbing），即事件右最具體的元素接受，然后逐級向上傳播到不具體的元素，以下面的代碼為例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value='click me' id='myBtn'>
</body>
</html>

如果你單擊了#myBtn，那么在IE的頁面中，這個事件會如下傳播：

input->body->html->document

可以看到，事件首先在input上發(fā)生，input就是我們單擊的元素。然后事件沿著DOM樹向上傳播，一直到document對象。
所有的現(xiàn)代瀏覽器都支持事件冒泡。IE9，F(xiàn)irefox，Chrome和Safari則將事件一直冒泡到window對象。

事件捕獲

Netscape團隊提出的另一種事件流叫事件捕獲，事件捕獲的思想是不太具體的節(jié)點應(yīng)該更早接收到事件，而最具體的節(jié)點應(yīng)該最后接收到事件。以上面的代碼作為例子，那么單擊div的時候會按照與冒泡相反的順序觸發(fā)事件。

document->html->body->input

在這個過程中，document對象先接收到click事件，然后事件沿著DOM樹依次向下，一直傳遞到目標(biāo)元素。
IE9，F(xiàn)irefox，Chrome和Safari都支持事件捕獲?！癉OM2級事件”規(guī)范要求事件應(yīng)該從document對象開始傳播，但實際上這些瀏覽器都是從window對象開始捕獲事件。

DOM事件流

規(guī)定的事件流包括三個階段：事件捕獲階段==>處于目標(biāo)階段==>事件冒泡階段。首先發(fā)生的是事件捕獲階段，為截獲事件提供了機會。然后是實際的目標(biāo)接收事件。最后一個階段是冒泡階段。

DOM事件流

事件處理程序

HTML事件處理程序
<script type="text/javascript">   
function show(){   
alert('hello world!');   
}   
</script>   
<input type="button" value="click me" onclick="show()"/>

在 html 中指定事件處理程序有兩個缺點。

  • 存在一個時差問題。就本例子來說，假設(shè) show()函數(shù)是在按鈕下方，頁面的最底部定義的，如果用戶在頁面解析 show()函數(shù)之前就單擊了按鈕，就會引發(fā)錯誤；
  • html 與 javascript 代碼緊密耦合。如果要更換時間處理程序，就要改動兩個地方：html 代碼和 javascript 代碼。
Javascript 指定事件處理程序

1.DOM0事件處理程序

var btn=document.getElementById("myBtn");   //獲得對象元素的引用
btn.onclick=function(){
    alert("Clicked!");
}

要使用JavaScript指定事件處理程序，必須先獲得對象元素的引用，然后為其指定事件處理程序的函數(shù)。
事件處理程序是在元素的作用域中運行的，也就是說程序中的this指向的是當(dāng)前元素。

var btn=document.getElementById("myBtn");   //獲得對象元素的引用
btn.onclick=function(){
    alert(this.id); //mybtn
}

通過將事件處理程序?qū)傩缘闹翟O(shè)置成null就可以刪除事件處理程序。

btn.onclick = null;

2.DOM2級事件處理程序

“DOM2級事件”規(guī)定了兩個方法用于操作事件處理程序：addEventListener()和removeEventListener()。所有的節(jié)點都包含這兩個方法，接收三個參數(shù)：要處理的事件名，作為事件處理程序的函數(shù)和一個布爾值。最后的參數(shù)如果是true，表示在事件捕獲階段調(diào)用事件處理程序，如果是false，表示在事件冒泡階段調(diào)用事件處理程序。

var btn=document.getElementById("myBtn");   
btn.addEventListener("click",function(){
    alert(this.id);
},false);

DOM0級事件處理程序只能為一個元素添加唯一的某一個事件的處理程序。如果為一個元素添加了兩個click的處理程序，后定義的程序會覆蓋掉之前定義的程序，其實也就是給變量a多次賦值一樣。使用DOM2級事件處理程序的好處之一就是：可以添加多個添加多個事件處理程序。

var btn = document.getElementById('mybtn');
           btn.addEventListener('click',function () {
               alert('click me');
           },false)
            btn.addEventListener('click',function () {
                alert(this.id)
            },false);

這兩個事件處理程序會按照添加的順序觸發(fā)。

通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除。通過addEventListener()添加的匿名函數(shù)無法移除，因為移除是傳入的參數(shù)與添加處理程序時使用的參數(shù)必須相同。

function handle() {
            alert('hello world')
}
btn.addEventListener('click',handle,false);
btn.removeEventListener('click',handle,false);

大多數(shù)情況下，都是就事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種瀏覽器。

IE中的事件處理程序

IE中有類似于DOM的兩個方法：attachEvent()和detachEvent()。這兩個方法接受兩個參數(shù)：事件處理程序名稱和事件處理程序函數(shù)。attachEvent()添加的事件處理程序都會添加到冒泡階段。

var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
    alert("click me");
});

需要注意的是，這里傳入的是‘onclick’而不是‘click’。
前面說到，在DOM0級事件中，事件處理程序的作用域是元素的作用域，而在使用attachEvent()時，作用域變成了全局作用域，此時this等于window

var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
    alert(this==widnow);//"true"
});

與addEventListener()一樣，attachEvent()也可以用來為一個元素添加多個事件處理程序，不過與DOM方法不同的是，事件處理程序不是按照添加的順序執(zhí)行，而是以相反的順序執(zhí)行。
可以使用detachEvent()移除使用attachEvent()添加的事件處理程序。與DOM方法一樣必須提供相同的參數(shù)，添加的匿名函數(shù)不能被移除。

因此，跨域瀏覽器的事件處理程序可以這樣寫：

var EventUtil = {   
addHandler: function(element, type, handler){ // 該方法接受 3 個參數(shù)：要操作的元素，事件名稱和事件處理程序函數(shù)   
if (element.addEventListener){ // 檢查傳入的元素是否存在 DOM2 級方法   
element.addEventListener(type, handler, false); // 若存在，則使用該方法   
} else if (element.addEvent){ // 如果存在的是 IE 的方法   
element.attachEvent("on" + type, handler); // 則使用 IE 的方法，注意，這里的事件類型必須加上 "on" 前綴。   
} else { // 最后一種可能是使用 DOM0 級   
element["on" + type] = hander;   
}   
},   

removeHandler: function(element, type, handler){ // 該方法是刪除之前添加的事件處理程序   
if (element.removeEventListener){ // 檢查傳入的元素是否存在 DOM2 級方法   
element.removeEventListener(type, handler, false); // 若存在，則使用該方法   
} else if (element.detachEvent){ // 如果存在的是 IE 的方法   
element.detachEvent("on" + type, handler); // 則使用 IE 的方法，注意，這里的事件類型必須加上 "on" 前綴。   
} else { // 最后一種可能是使用 DOM0 及方法 (在現(xiàn)代瀏覽器中，應(yīng)該不會執(zhí)行這里的代碼)   
element["on" + type] = null;   
}   
}   
};  
var btn =document.getElementById("mybtn");   
var hander= function(){   
alert("clicked");   
};   
 
EventUtil.addHandler(btn,"click",hander);   
 
EventUtil.removeHandler(btn,"click",hander); // 移除之前添加的事件處理程序

參考資料：
https://segmentfault.com/a/1190000003497939
http://wiki.jikexueyuan.com/project/brief-talk-js/event-handlers.html

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 以下文章為轉(zhuǎn)載，對理解JavaScript中的事件處理機制很有幫助，淺顯易懂，特分享于此。 什么是事件？ 事件(E...
    jxyjxy閱讀 3,074評論 1贊 10
  • JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設(shè)計風(fēng)格下，當(dāng)文檔、瀏覽器、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,280評論 3贊 11
  • 聲明：本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學(xué)習(xí)筆記整理一下（...
    angryyan閱讀 7,129評論 1贊 6
  • 本章內(nèi)容 理解事件流 使用事件處理程序 不同的事件類型 JavaScript 與 HTML 之間的交互是通過事件實...
    悶油瓶小張閱讀 293評論 0贊 0
  • 一、問答 1. dom對象的innerText和innerHTML有什么區(qū)別？ innerHTML： 也就是從對象...
    饑人谷_羅偉恩閱讀 644評論 0贊 2