JS與HTML之間的交互通過(guò)事件實(shí)現(xiàn)。事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂帽O(jiān)聽(tīng)器(或處理程序)來(lái)預(yù)定事件，以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。這種在傳統(tǒng)軟件工程中被稱為觀察員模式，支持頁(yè)面的行為與頁(yè)面的外觀之間的松散耦合。本文將介紹JS事件相關(guān)的基礎(chǔ)知識(shí)。
十年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站設(shè)計(jì)，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計(jì),高端網(wǎng)頁(yè)制作,對(duì)成都橡塑保溫等多個(gè)行業(yè)，擁有豐富設(shè)計(jì)經(jīng)驗(yàn)。
一、事件流
事件流描述的是從頁(yè)面中接受事件的順序。
事件冒泡
事件開(kāi)始時(shí)由最具體的元素(文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn))接收，然后逐級(jí)向上傳播到較為不具體的結(jié)點(diǎn)(文檔)。以下面HTML頁(yè)面為例，如果你點(diǎn)擊了頁(yè)面中的按鈕，那么”click”事件會(huì)按照< button>、< body>、< html>、document的順序傳播。換句話說(shuō)，事件冒泡指的就是事件從底層觸發(fā)事件的元素開(kāi)始沿著DOM樹(shù)向上傳播，直到document對(duì)象。
Test
事件捕獲
與事件冒泡的思路相反，事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早地接收到事件，最具體的結(jié)點(diǎn)應(yīng)該最后才接收事件。同樣還是上面那個(gè)例子，點(diǎn)擊頁(yè)面中的按鈕之后，”click”事件會(huì)按照document、< html>、< body>、< button>的順序傳播。換句話說(shuō)，事件捕獲就是指事件從document對(duì)象開(kāi)始沿著DOM樹(shù)向下傳播，直到事件的實(shí)際目標(biāo)元素。
DOM事件流
“DOM2級(jí)事件”規(guī)定的事件包括三個(gè)階段: 事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收到事件。最后一個(gè)階段是冒泡階段，可以在這個(gè)階段對(duì)事件做出響應(yīng)。
還是以之前的點(diǎn)擊按鈕為例，在DOM事件流中，捕獲階段，”click”事件從document開(kāi)始向下傳遞到body元素(注意，實(shí)際目標(biāo)button在捕獲階段不會(huì)接收到事件)。目標(biāo)階段，button元素接收到”click”事件。最后，冒泡階段，事件又被傳播回文檔。
二、事件處理程序
事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，而響應(yīng)某個(gè)事件的函數(shù)就叫做事件處理程序或事件偵聽(tīng)器。
HTML事件處理程序
這里的HTML事件處理程序指的是直接在HTML元素里面通過(guò)特性(attribute)定義的事件處理程序，請(qǐng)看下面的代碼示例。這樣是定的事件處理程序會(huì)創(chuàng)建一個(gè)封裝著元素屬性值的函數(shù)，this值等于事件的目標(biāo)元素。通過(guò)這種方法指定事件處理程序存在不少缺點(diǎn)，不推薦使用。
DOM0級(jí)事件處理程序
通過(guò)JS指定事件處理程序的傳統(tǒng)方式就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?，?qǐng)看下面代碼示例。通過(guò)這種方式指定的事件處理程序是在元素的作用域中運(yùn)行，this引用的是當(dāng)前元素。這種方式添加的事件處理程序會(huì)在事件流的冒泡階段被處理。若要?jiǎng)h除事件，直接令onclick的值為空即可。
重慶分公司
重慶分公司
var btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log("this.id"); // "myBtn"
};
// 刪除事件處理程序
btn.onclick = null;DOM2級(jí)事件處理程序
“DOM2級(jí)事件”定義了兩個(gè)方法用于指定和刪除事件處理程序，addEventListener()和removeEventListener()。所有DOM節(jié)點(diǎn)中都包含這兩個(gè)方法。這兩個(gè)方法都接收3個(gè)參數(shù)，要處理的事件、處理函數(shù)、布爾值。最后的布爾值為true時(shí)表示在捕獲階段調(diào)用事件處理程序，為false時(shí)表示在冒泡階段調(diào)用處理程序。與DOM0級(jí)方法一樣，這里添加的事件處理程序也是在其依附的元素的作用域中運(yùn)行。DOM2級(jí)方法添加事件處理程序的優(yōu)勢(shì)是可以添加多個(gè)事件處理程序。這些事件處理程序會(huì)按照它們被添加的順序觸發(fā)。下面是代碼示例：
var btn = document.getElementById("myBtn");
// 添加，觸發(fā)點(diǎn)擊事件時(shí)先輸出"myBtn"再輸出"HaHa~"
btn.addEventListener("click", function() {
console.log(this.id);
}, false);
btn.addEventListener("click", function() {
console.log("HaHa~");
}, false);通過(guò)addEventListener()添加的事件只能通過(guò)removeEventListener()來(lái)刪除。刪除時(shí)傳入的參數(shù)與添加時(shí)使用的參數(shù)應(yīng)該保持一致。這也意味著通過(guò)addEventListener()添加的匿名函數(shù)將無(wú)法刪除，因?yàn)闊o(wú)法將添加時(shí)傳遞的匿名函數(shù)傳給removeEventListener()，即便在刪除的時(shí)候?qū)懥艘粋€(gè)一模一樣的函數(shù)，但此時(shí)這個(gè)函數(shù)只是一個(gè)新的匿名函數(shù)。請(qǐng)看下面代碼示例：
var btn = document.getElementById("myBtn");
// 無(wú)法刪除匿名函數(shù)
btn.addEventListener("click", function() {
console.log(this.id);
}, false);
btn.removeEventListener("click", function() {
console.log(this.id);
}, false);
// 正確的添加和刪除方式
function handler() {
console.log(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);
大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。最好只在需要在事件到達(dá)目標(biāo)之前截獲它的時(shí)候才將事件處理程序添加到捕獲階段。JS高級(jí)程序設(shè)計(jì)上給出的建議是，如果不是特別需要，不建議在事件捕獲階段注冊(cè)事件處理程序。
IE事件處理程序
IE實(shí)現(xiàn)了與DOM中類(lèi)似的兩個(gè)方法: attachEvent()和deleteEvent()。這兩個(gè)方法接收兩個(gè)參數(shù)，事件處理程序名稱和事件處理程序。注意，第一個(gè)參數(shù)是事件處理程序名稱而不是事件名稱，也就是說(shuō)在注冊(cè)點(diǎn)擊事件的處理程序時(shí)應(yīng)該傳入”onclick”而不是”click”，這里跟DOM的方法有些差別。另外，這兩個(gè)方法注冊(cè)的事件處理程序是在全局作用域中運(yùn)行而不是元素作用域，this的值指向window。還有一點(diǎn)需要特別小心，通過(guò)attachEvent()方法也可以添加多個(gè)事件處理程序，但是它們的執(zhí)行順序卻不是按照它們被添加的順序，而是完全相反，跟DOM方法截然不同。突然覺(jué)得IE真的特別反人類(lèi)~~~下面是代碼示例：
var btn = document.getElementById("myBtn");
function handler1() { // ... }
function handler2() { // ... }
// 添加，觸發(fā)點(diǎn)擊事件時(shí)先執(zhí)行handler2再執(zhí)行handler1
btn.attachEvent("onclick", handler1);
btn.attachEvent("onclick", handler2);
// 刪除
btn.deleteEvent("onclick", handler1);
btn.deleteEvent("onclick", handler2);三、事件對(duì)象
在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象中包含著所有與事件有關(guān)的信息，包括導(dǎo)致事件的元素、事件的類(lèi)型以及其他與特定事件相關(guān)的信息。
DOM中的事件對(duì)象
兼容DOM的瀏覽器會(huì)將一個(gè)event對(duì)象傳入事件處理程序中，無(wú)論指定事件處理程序時(shí)用的是DOM0還是DOM2的方法，都會(huì)傳入event對(duì)象。event對(duì)象只有在事件處理程序執(zhí)行期間才會(huì)存在，一旦事件處理程序執(zhí)行完畢，event對(duì)象就會(huì)被銷(xiāo)毀。下面是代碼示例：
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
console.log(event.type);
}, false);event對(duì)象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法，觸發(fā)的事件類(lèi)型不一樣，可用的屬性方法也有所不同。但是所有的事件都會(huì)有下列的屬性或方法：
下面代碼示例展示了上述部分屬性的用法，也可以幫助我們進(jìn)一步理解事件流。假設(shè)頁(yè)面中有一個(gè)按鈕”myBtn”。當(dāng)點(diǎn)擊按鈕時(shí)，this和currentTarget都等于body元素，因?yàn)槭录幚沓绦蚴亲?cè)在body元素上。target的值卻等于按鈕元素，因?yàn)樗莄lick事件的真正目標(biāo)。由于按鈕上沒(méi)有注冊(cè)事件處理程序，結(jié)果”click”事件冒泡到了document.body那里才得到處理。
document.body.onclick = function(event) {
console.log(event.currentTarget === document.body); // true
console.log(this === document.body); // true
console.log(event.target === document.getElementById("myBtn")); // true
};再看一個(gè)例子，下面代碼中，stopPropagation()方法取消了事件的進(jìn)一步捕獲或冒泡。當(dāng)我點(diǎn)擊按鈕時(shí)，本來(lái)應(yīng)該會(huì)因?yàn)槭录芭輽C(jī)制觸發(fā)按鈕和body元素上的點(diǎn)擊事件處理程序，輸出”From Bth …”和”From Body …”?，F(xiàn)在點(diǎn)擊事件在按鈕元素上觸發(fā)之后就被阻止繼續(xù)在DOM層次中的傳播，因此body上的事件處理程序不會(huì)被觸發(fā)。
var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log("From Bth ...");
event.stopPropagation(); // 停止事件傳播
};
document.body.onclick = function() {
console.log("From Body ...");
};IE中的事件對(duì)象
在IE中，使用DOM0的方法添加事件處理程序時(shí)，event對(duì)象作為window對(duì)象的一個(gè)屬性存在。如果是通過(guò)attachEvent()方法添加，則event對(duì)象是作為參數(shù)傳入事件處理函數(shù)。下面是代碼示例：
var btn = document.getElementById("myBtn");
btn.onclick = function() {
var event = window.event;
console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
console.log(event.type); // "click"
});IE的event對(duì)象同樣也包含與創(chuàng)建它的事件相關(guān)的屬性和方法，這些屬性和方法也會(huì)因?yàn)槭录?lèi)型的不同而有所差異。但所有事件對(duì)象都會(huì)包含下列屬性：
在IE中，事件處理程序的作用域是根據(jù)指定它的方式來(lái)確定，this的值不一定是指向事件的目標(biāo)元素。因此，使用srcElement屬性更具保險(xiǎn)。請(qǐng)看下面代碼實(shí)例，第一種方式中this的值為目標(biāo)元素，而第二種方式，前面講過(guò)這種方式的事件處理程序是在全局作用域中執(zhí)行，因此this的值為window。
var btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log(window.event.srcElement === this); // true
}
btn.attachEvent("onclick", function(event) {
console.log(event.srcElement === this); // false
});以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！
