JavaScript事件

Xufc 發(fā)布于2019-08-22 15:04 / 2033人閱讀

摘要：最后這個(gè)布爾值參數(shù)如果是，表示再捕獲階段就調(diào)用事件處理程序如果是，則是再冒泡階段調(diào)用事件處理程序好處可以添加多個(gè)事件處理程序

概述

JavaScript與HTML之間的交互通過(guò)事件實(shí)現(xiàn)。事件，就是文檔或者瀏覽器窗口中發(fā)生的一些特定的交互瞬間.

事件流

當(dāng)單擊頁(yè)面上的按鈕時(shí)，你也單擊了按鈕的容器元素，甚至也單擊了整個(gè)頁(yè)面，那這幾個(gè)元素的接收到事件的順序是如何呢？
事件流就是指從頁(yè)面中接收事件的順序。事件流有以下兩種：

事件冒泡

事件開始時(shí)從最具體的元素接收，然后逐級(jí)向上傳播，也就是說(shuō)如果點(diǎn)擊一個(gè)元素，該元素的點(diǎn)擊事件先發(fā)生再傳播至上一級(jí)

事件捕獲

事件從最不具體的元素開始，到你真正接收事件的節(jié)點(diǎn)逐級(jí)向下傳播，也就是說(shuō)點(diǎn)擊一個(gè)元素，若document有點(diǎn)擊事件，則先發(fā)生document事件，再發(fā)生至你點(diǎn)擊的元素

DOM事件流

‘DOM2級(jí)事件’規(guī)定的事件流包括三個(gè)階段：事件捕獲、處于目標(biāo)階段和事件冒泡階段。
先后順序：
事件捕獲，為截獲事件提供機(jī)會(huì)-->實(shí)際的目標(biāo)接收到事件-->事件冒泡，在這個(gè)階段對(duì)事件做出響應(yīng)。

事件處理程序

事件是用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作，那么事件處理程序就是響應(yīng)某個(gè)事件的處理函數(shù)，事件處理程序的名字以‘on’開頭

HTML事件處理程序

DOM0級(jí)事件處理程序

var btn = document.querySelector("#clickMe")
btn.onclick = function() {
    alert("我被點(diǎn)擊了")
}

DOM2級(jí)事件處理程序

btn.addEventListener("click", function() {
    alert("我被點(diǎn)擊了")
}, true)

DOM2級(jí)事件定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作：addEventListerner和removeEventListener，它們接收三個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。
最后這個(gè)布爾值參數(shù)如果是true，表示再捕獲階段就調(diào)用事件處理程序；如果是false，則是再冒泡階段調(diào)用事件處理程序
好處：可以添加多個(gè)事件處理程序

云服務(wù)器 GPU云服務(wù)器 javascript事件 javascript鍵盤事件 javascript焦點(diǎn)事件 javascript事件綁定

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93148.html

相關(guān)文章

瀏覽器下的 Event Loop

摘要：前言是以單線程的形式運(yùn)行在宿主環(huán)境下，采用了回調(diào)的形式來(lái)解決異步任務(wù)。線程中步就是在瀏覽器下的。前言 javascript 是以單線程的形式運(yùn)行在宿主環(huán)境下，javascript 采用了回調(diào)的形式來(lái)解決異步任務(wù)。為什么是單線程？ javascript 的最開始的出現(xiàn)是為了給 web 頁(yè)面增添一些動(dòng)態(tài)的效果，那么就避免不了獲取頁(yè)面上的元素信息，如果 javascript 是以多線程的...

forrest23 2019-08-23 16:50 評(píng)論0 收藏0
什么是JavaScript 事件循環(huán) ?

摘要：此事件隊(duì)列的美妙之處在于它只是函數(shù)等待被調(diào)用和移動(dòng)到調(diào)用棧的一個(gè)臨時(shí)存放區(qū)域。在事件循環(huán)不斷監(jiān)視調(diào)用棧是否為空現(xiàn)在確實(shí)是空的時(shí)候調(diào)用創(chuàng)建一個(gè)新的調(diào)用棧來(lái)執(zhí)行代碼。在執(zhí)行完之后進(jìn)入了一個(gè)新的狀態(tài)這個(gè)狀態(tài)調(diào)用棧為空事件記錄表為空事件隊(duì)列也為空。這篇文章是對(duì)個(gè)人認(rèn)為講解　JavaScript　事件循環(huán)比較清楚的一篇英文文章的簡(jiǎn)單翻譯,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 評(píng)論0 收藏0
JavaScript 瀏覽器事件解析

摘要：原文瀏覽器事件之間的關(guān)系程序采用了異步事件驅(qū)動(dòng)編程模型，維基百科對(duì)它的解釋是事件驅(qū)動(dòng)程序設(shè)計(jì)英語(yǔ)是一種電腦程序設(shè)計(jì)模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、瀏覽器、事件之間的關(guān)系 JavaScript 程序采用了異步事件驅(qū)動(dòng)編程（Event-driven program...

spacewander 2019-08-20 11:26 評(píng)論0 收藏0
《JavaScript高級(jí)程序設(shè)計(jì)》學(xué)習(xí)筆記：JavaScript中的事件流和事件處理程序

摘要：可以使用偵聽器或處理程序來(lái)預(yù)訂事件，以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。響應(yīng)某個(gè)事件的函數(shù)稱為事件處理程序或事件偵聽器。可以刪除通過(guò)級(jí)方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。事件：文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。可以使用偵聽器（或處理程序來(lái)預(yù)訂事件），以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。 1. 事件流事件流：從頁(yè)面中接收事件的順序。 ...

Rocko 2019-08-19 17:21 評(píng)論0 收藏0
【譯】JavaScript面試問(wèn)題：事件委托和this

摘要：主題來(lái)自于的典型面試問(wèn)題列表。有多種方法來(lái)處理事件委托。這種方法的缺點(diǎn)是父容器的偵聽器可能需要檢查事件來(lái)選擇正確的操作，而元素本身不會(huì)是一個(gè)監(jiān)聽器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 評(píng)論0 收藏0
初窺JavaScript事件機(jī)制的實(shí)現(xiàn)（一）—— Node.js事件驅(qū)動(dòng)實(shí)現(xiàn)概覽

摘要：如果當(dāng)前沒有事件也沒有定時(shí)器事件，則返回。相關(guān)資料關(guān)于的架構(gòu)及設(shè)計(jì)思路的事件討論了使用線程池異步運(yùn)行代碼。下一篇初窺事件機(jī)制的實(shí)現(xiàn)二中定時(shí)器的實(shí)現(xiàn) 在瀏覽器中，事件作為一個(gè)極為重要的機(jī)制，給予JavaScript響應(yīng)用戶操作與DOM變化的能力；在Node.js中，事件驅(qū)動(dòng)模型則是其高并發(fā)能力的基礎(chǔ)。學(xué)習(xí)JavaScript也需要了解它的運(yùn)行平臺(tái)，為了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 評(píng)論0 收藏0