JavaScript的事件

LuDongWei 發布于2019-08-21 18:39 / 2487人閱讀

摘要：我認為的重點事件，事件監聽，事件處理函數，事件流的定義事件流的冒泡和捕獲階段是什么節點有多個事件處理程序，他們的執行順序怎么確定搜索程序的順序事件處理函數內添加事件監聽阻止默認事件和阻止冒泡的代碼結合事件知識點寫一個定義對于一個經典的事件監

我認為的重點

事件，事件監聽，事件處理函數，事件流的定義

事件流的冒泡和捕獲階段是什么?

DOM 節點有多個事件處理程序，他們的執行順序怎么確定?搜索程序的順序

事件處理函數內添加事件監聽

阻止默認事件和阻止冒泡的代碼

結合事件知識點寫一個 demo

定義

對于一個經典的事件監聽函數,明確一些概念

btn.addEventListener("click", function(){
  //這個函數就是事件處理函數
  console.log(1)
})

事件 === 用戶的動作 ===在上面的代碼就是 "click"

事件監聽 === 上面的整個代碼 === 事件 + 事件處理函數

事件處理函數 === 在上面的代碼就是console.log(1)

事件流 === 事件在 DOM 節點樹傳播的順序,可以是冒泡或者捕獲

冒泡階段和捕獲階段

冒泡和捕獲階段測試 demo : http://js.jirengu.com/tofisal...

DOM

問題: 點擊4區域,解釋打印結果

注意點:

div3 有兩個函數,注意執行順序

div3 之后有個×, 他的實現的代碼是什么?

問題: 如果我點擊3區域,打印什么?

打印冒泡2222, 3 ,33333

事件處理程序順序測試demo: http://js.jirengu.com/qoyoben...

點擊 3 區域,解釋打印內容

總結: 一個 DOM 結點事件處理程序的順序:

先捕獲后冒泡

哪個代碼在前面, 哪個代碼就先執行

一般情況下, 是先看1,如果1相同,再看2

但是當 DOM 結點(如 demo 的 div4 )之后沒有 DOM 結點, 那個按照第2條規則處理

事件處理函數內添加事件監聽

點擊3區域, 解釋打印內容

代碼如下: http://js.jirengu.com/bonacob...

根據代碼畫出 DOM

從 div3 開始冒泡, 所以打印3, 2

改變需求: 點擊3區域的時候, 只打印3, 第二次點擊3區域的時候,打印3, 2

代碼: http://js.jirengu.com/jiresoy...

根據代碼畫出 DOM

總結:

當你給 DOM 節點的事件處理函數內添加了一個事件監聽A, 那么事件監聽A是馬上添加到 DOM 中(也就是說剛添加的事件監聽A在第一次點擊就能激活, 看第一個例子)

如果你想讓添加的事件監聽A不是馬上添加到 DOM 中(也就是說剛添加的事件監聽A在第二次點擊才能激活)那么可以使用setTimeout解決. (看第二個例子)

dismissible propover

效果: http://js.jirengu.com/nanepev...

列出所有情況

注意點:

什么時候用事件處理函數內添加事件監聽?

第二次與第一次的 DOM 結構函數不同 + 第二次是在第一次的某種情況下(紅圈)

云服務器 GPU云服務器 javascript的事件 javascript事件 javascript鍵盤事件 javascript焦點事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90686.html

瀏覽器下的 Event Loop

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

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

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

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

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

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

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

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

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

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

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