資訊專(zhuān)欄INFORMATION COLUMN
摘要：在內(nèi)聯(lián)模型中，事件處理函數(shù)是標(biāo)簽的一個(gè)屬性，用于處理指定事件。事件捕獲與冒泡原理圖事件流同時(shí)支持兩種事件模型捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。
javascript -- 事件
事件是js和用戶操作交互的橋梁,
JavaScript 有三種事件模型：內(nèi)聯(lián)模型、腳本模型和 DOM2 模型
內(nèi)聯(lián)模型這種模型是最傳統(tǒng)接單的一種處理事件的方法。在內(nèi)聯(lián)模型中，事件處理函數(shù)是 HTML 標(biāo)簽的一個(gè)屬性，用于處理指定事件。雖然內(nèi)聯(lián)在早期使用較多，但它是和 HTML 混寫(xiě)的，并沒(méi)有與 HTML 分離。
//在 HTML 中把事件處理函數(shù)作為屬性執(zhí)行 JS 代碼
//注意單雙引號(hào)
腳本模型
由于內(nèi)聯(lián)模型違反了 HTML 與 JavaScript 代碼層次分離的原則。為了解決這個(gè)問(wèn)題，我 們可以在 JavaScript 中處理事件。這種處理方式就是腳本模型。
var input = document.getElementsByTagName("input")[0]; //得到 input 對(duì)象
input.onclick = function () { //匿名函數(shù)執(zhí)行
alert("Lee");
};
直接接收 event 對(duì)象，是 W3C 的做法，IE 不支持，IE 自己定義了一個(gè) event 對(duì)象，直接在 window.event 獲取即可。
div.onclick = function (evt) {
var e = evt || window.event; //實(shí)現(xiàn)跨瀏覽器兼容獲取 event 對(duì)象
if(evt){
//w3c代碼
} else if (window.event) {
//ie代碼
}
};
DOM2 級(jí)
模型定義了兩個(gè)方法，用于添加事件和刪除事件處理程序的操作：
addEventListener()和 removeEventListener()所有 DOM 節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接受 3 個(gè)參數(shù)；事件名、函數(shù)、冒泡或捕獲的布爾值(true 表示捕獲，false 表示冒泡)。
div.addEventListener("click", function () {
alert("Lee");
}, false);
div.addEventListener("click", function () {
alert("Mr.Lee");
}, false);
捕獲與冒泡
事件流分為2種:
(1) 冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)
(2) 捕獲型事件(event capturing)：事件從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā)，然后到最精確(也可以在窗口級(jí)別捕獲事件，不過(guò)必須由開(kāi)發(fā)人員特別指定)
支持W3C標(biāo)準(zhǔn)的瀏覽器在添加事件時(shí)用addEventListener(event,fn,useCapture)方法，基中第3個(gè)參數(shù)useCapture是一個(gè)Boolean值，用來(lái)設(shè)置事件是在事件捕獲時(shí)執(zhí)行，還是事件冒泡時(shí)執(zhí)行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒(méi)有相關(guān)設(shè)置，不過(guò)IE的事件模型默認(rèn)是在事件冒泡時(shí)執(zhí)行的，也就是在useCapture等于false的時(shí)候執(zhí)行，所以把在處理事件時(shí)把useCapture設(shè)置為false是比較安全，也實(shí)現(xiàn)兼容瀏覽器的效果。js事件捕獲與冒泡原理圖
DOM事件流：同時(shí)支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會(huì)觸及DOM中的所有對(duì)象，從document對(duì)象開(kāi)始，也在document對(duì)象結(jié)束。
W3c明智的在這場(chǎng)爭(zhēng)斗中選擇了一個(gè)擇中的方案。任何發(fā)生在w3c事件模型中的事件，首是進(jìn)入捕獲階段，直到達(dá)到目標(biāo)元素，再進(jìn)入冒泡階段你可以選擇是在捕獲階段還是冒泡階段綁定事件處理函數(shù)，這是通過(guò)addEventListener()方法實(shí)現(xiàn)的，如果這個(gè)函數(shù)的最后一個(gè)參數(shù)是true，則在捕獲階段綁定函數(shù)，反之false(默認(rèn))，在冒泡階段綁定函數(shù)。
當(dāng)然IE作為前端程序員的口誅筆伐者自然如上面所說(shuō)只支持冒泡階段執(zhí)行, 然而令人高興的是從IE9 微軟擁抱 w3c 隨著谷歌的崛起 chrome已經(jīng)站到瀏覽器的半壁江山, IE678 逐步走出歷史, 無(wú)疑給是前端開(kāi)發(fā)的福音
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107294.html
摘要：捕獲型事件流事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。鼠標(biāo)移入元素范圍內(nèi)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素上時(shí)不會(huì)觸發(fā)。 事件通常與函數(shù)配合使用，這樣就可以通過(guò)發(fā)生的事件來(lái)驅(qū)動(dòng)函數(shù)執(zhí)行，事件是可以被 JavaScript 偵測(cè)到的行為 綁定事件 首先我們要先綁定事件 綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...
摘要：捕獲型事件流事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。鼠標(biāo)移入元素范圍內(nèi)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素上時(shí)不會(huì)觸發(fā)。 事件通常與函數(shù)配合使用，這樣就可以通過(guò)發(fā)生的事件來(lái)驅(qū)動(dòng)函數(shù)執(zhí)行，事件是可以被 JavaScript 偵測(cè)到的行為 綁定事件 首先我們要先綁定事件 綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...
摘要：事件流指的是從頁(yè)面接收事件的順序。級(jí)事件規(guī)定方法的第三個(gè)參數(shù)設(shè)為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據(jù)級(jí)事件規(guī)定，事件流應(yīng)該包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。 什么是事件？（敲黑板） 事件，就是文檔或?yàn)g覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級(jí)程序設(shè)計(jì)》）比如鼠標(biāo)點(diǎn)擊，雙擊，滾動(dòng)條滑動(dòng)... 什么是事件...
摘要：本文主要解決兩個(gè)問(wèn)題什么是事件流事件流的三個(gè)階段起因在學(xué)習(xí)前端的大半年來(lái)，對(duì)事件了解甚少。事件流所描述的就是從頁(yè)面中接受事件的順序。事件流事件流包括三個(gè)階段。防止事件冒泡而帶來(lái)不必要的錯(cuò)誤和困擾。分有事件冒泡與事件捕獲兩種。 本文主要解決兩個(gè)問(wèn)題： 什么是事件流 DOM事件流的三個(gè)階段 起因 在學(xué)習(xí)前端的大半年來(lái)，對(duì)DOM事件了解甚少。一般也只是用用onclick來(lái)綁定個(gè)點(diǎn)擊事件。...
閱讀 831·2021-10-14 09:43
閱讀 2149·2021-09-30 09:48
閱讀 3484·2021-09-08 09:45
閱讀 1124·2021-09-02 15:41
閱讀 1920·2021-08-26 14:15
閱讀 810·2021-08-03 14:04
閱讀 3006·2019-08-30 15:56
閱讀 3102·2019-08-30 15:52
