JavaScript事件的知識(shí)點(diǎn)有哪些

今天小編給大家分享一下JavaScript事件的知識(shí)點(diǎn)有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

事件就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。JavaScript與HTML之間的交互是通過(guò)事件 實(shí)現(xiàn)的。對(duì)于 Web 應(yīng)用來(lái)說(shuō)，有下面這些代表性的事件：?jiǎn)螕羰录⑹髽?biāo)移入移出事件、鍵盤(pán)按下/彈 起事件等等。事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂帽O(jiān)聽(tīng)器（或事件處理程序）來(lái)預(yù)訂事件，以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。

這里簡(jiǎn)單的介紹以下幾種常用的事件：文檔加載事件，事件對(duì)象，事件冒泡，事件委派，事件綁定，事件傳播，鍵盤(pán)事件。

文檔加載事件（onload）：onload事件會(huì)在整個(gè)頁(yè)面加載完成之后觸發(fā)。使用如圖：

從性能方面考慮，寫(xiě)在頁(yè)面的下邊更好！將js代碼寫(xiě)在頁(yè)面的下面，就是為了保證執(zhí)行代碼的時(shí)候頁(yè)面已經(jīng)加載完畢。window.onload 在頁(yè)面上只能出現(xiàn)一次，后面的代碼會(huì)覆蓋前面的代碼。

事件對(duì)象：事件發(fā)生以后，會(huì)產(chǎn)生一個(gè)事件對(duì)象，作為參數(shù)傳給監(jiān)聽(tīng)函數(shù)。具體的表現(xiàn)就是我們?cè)诨卣{(diào)函數(shù)中傳入一個(gè)event形參，這個(gè)形參的值是JS自動(dòng)傳入的。在這個(gè)事件對(duì)象中會(huì)包含這次事件的所有相關(guān)信息，包括是什么事件(鼠標(biāo)/鍵盤(pán))，事件的觸發(fā)者，事件的目標(biāo)等。

在DOM對(duì)象上的某個(gè)事件被觸發(fā)時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象Event，這個(gè)對(duì)象中包含著所有事件有關(guān)的信息。包括導(dǎo)致事件的元素、事件的類(lèi)型以及其 他與特定事件相關(guān)的信息。DOM標(biāo)準(zhǔn)的瀏覽器會(huì)將一個(gè)event對(duì)象傳入到事件的處理程序當(dāng)中。無(wú)論事件處理程序是什么都會(huì)傳入一個(gè)event對(duì)象。Event對(duì)象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類(lèi)型不一樣，可用的屬性和方法也不一樣。這里簡(jiǎn)單的說(shuō)一下鼠標(biāo)/鍵盤(pán)事件如圖：

IE中的事件對(duì)象與訪問(wèn) DOM 中的 event 對(duì)象不同，要訪問(wèn) IE 中 的 event 對(duì)象有幾種不同的方式，取決于指定事件 處理程序的方法。在IE中event對(duì)象作為window對(duì)象的屬性存在的， 可以使用window.event來(lái)獲取event對(duì)象在使用attachEvent()的情況下，也會(huì)在處理程序中 傳遞一個(gè)event對(duì)象，也可以按照前邊的方式使用。這里通過(guò)一個(gè)案例來(lái)說(shuō)明：當(dāng)鼠標(biāo)在box盒子上面的時(shí)候 ，下面p標(biāo)簽顯示鼠標(biāo)當(dāng)前的坐標(biāo)

效果圖：

代碼圖：

事件冒泡(Bubble): 所謂冒泡指的就是事件的向上傳導(dǎo)，當(dāng)后代元素上的事件被觸發(fā)時(shí)，其祖先元素的相同事件也會(huì)被觸發(fā)。在開(kāi)發(fā)中大部分情況冒泡都是有用的，如果不希望冒泡發(fā)生可以通過(guò)事件對(duì)象取消冒泡 event.cancelBubble=true。

效果圖：

代碼圖：

事件的委派：指將事件統(tǒng)一綁定給元素共同的祖先元素，這樣當(dāng)后代元素上的事件觸發(fā)時(shí)，會(huì)一直冒泡到祖先元素，從而通過(guò)祖先元素的響應(yīng)函數(shù)來(lái)處理事件。事件委派是利用冒泡，通過(guò)委派可以減少事件綁定的次數(shù)，提高程序的性能。事件對(duì)象的屬性target：返回觸發(fā)此事件的元素(事件的目標(biāo)節(jié)點(diǎn))

案例：

效果圖：

代碼圖：

事件綁定：我們可以通過(guò)兩種常用的方式為一個(gè)元素綁定事件處理程序：通過(guò)HTML元素指定事件屬性來(lái)綁定；通過(guò)DOM對(duì)象指定的屬性來(lái)綁定。還有一種方式比較特殊我們稱(chēng)為設(shè)置事件監(jiān)聽(tīng)器，元素對(duì)象：addEventListener()。前邊兩種方式都可以綁定事件處理程序，但是它們都有一個(gè)缺點(diǎn)就是都只能綁定一個(gè)程序，而不能為一個(gè)事件綁定多個(gè)程序。addEventListener(),通過(guò)這個(gè)方法也可以為元素綁定響應(yīng)函數(shù)。使用addEventListener()可以同時(shí)為一個(gè)元素的相同事件綁定多個(gè)響應(yīng)函數(shù)。這樣當(dāng)事件被觸發(fā)時(shí)，響應(yīng)函數(shù)將會(huì)按照函數(shù)的綁定順序執(zhí)行。這個(gè)方法不支持IE8及以下的瀏覽器，需要 使用attachEvent代替。attachEvent()，在IE8中可以使用attachEvent()來(lái)綁定事件 。這個(gè)方法也可以同時(shí)為一個(gè)事件綁定多個(gè)處理函數(shù)，不同的是它是后綁定先執(zhí)行，執(zhí)行順序和addEventListener()相反。

事件傳播：事件傳播可以分為三個(gè)階段：捕獲階段 - 在捕獲階段時(shí)從最外層的祖先元素，向目標(biāo)元素進(jìn)行事件的捕獲，但是默認(rèn)此時(shí)不會(huì)觸發(fā)事件；目標(biāo)階段 - 事件捕獲到目標(biāo)元素，捕獲結(jié)束開(kāi)始在目標(biāo)元素上觸發(fā)事件；冒泡階段 - 事件從目標(biāo)元素向他的祖先元素傳遞，依次觸發(fā)祖先元素上的事件。

鍵盤(pán)事件：onkeydown: 鍵盤(pán)被按下事件。如果一直按著某個(gè)鍵不松開(kāi)，則會(huì)一直觸發(fā)該事件，當(dāng)onkeydown事件連續(xù)觸發(fā)時(shí)，第一次和第二次之間的間隔時(shí)間稍微長(zhǎng)一點(diǎn)，其他則會(huì)非?？臁＿@是為了防止誤操作的發(fā)生。onkeyup: 鍵盤(pán)被松開(kāi)的事件。鍵盤(pán)事件一般都會(huì)綁定給一些可以獲取焦點(diǎn)的對(duì)象或則是document。

以上就是“JavaScript事件的知識(shí)點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。