JavaScript事件

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

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

概述

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

事件流

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

事件冒泡

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

事件捕獲

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

DOM事件流

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

事件處理程序

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

HTML事件處理程序

DOM0級事件處理程序

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

DOM2級事件處理程序

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/93148.html

相關(guān)文章

瀏覽器下的 Event Loop

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

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

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

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

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

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

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

Rocko 2019-08-19 17:21 評論0 收藏0
【譯】JavaScript面試問題：事件委托和this

摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監(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 評論0 收藏0
初窺JavaScript事件機(jī)制的實現(xiàn)（一）—— Node.js事件驅(qū)動實現(xiàn)概覽

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

lavor 2019-08-21 10:33 評論0 收藏0