資訊專欄INFORMATION COLUMN
摘要：我認(rèn)為的重點(diǎn)事件，事件監(jiān)聽，事件處理函數(shù)，事件流的定義事件流的冒泡和捕獲階段是什么節(jié)點(diǎn)有多個事件處理程序，他們的執(zhí)行順序怎么確定搜索程序的順序事件處理函數(shù)內(nèi)添加事件監(jiān)聽阻止默認(rèn)事件和阻止冒泡的代碼結(jié)合事件知識點(diǎn)寫一個定義對于一個經(jīng)典的事件監(jiān)
我認(rèn)為的重點(diǎn)
事件，事件監(jiān)聽，事件處理函數(shù)，事件流的定義
事件流的冒泡和捕獲階段是什么?
DOM 節(jié)點(diǎn)有多個事件處理程序，他們的執(zhí)行順序怎么確定?搜索程序的順序
事件處理函數(shù)內(nèi)添加事件監(jiān)聽
阻止默認(rèn)事件和阻止冒泡的代碼
結(jié)合事件知識點(diǎn)寫一個 demo
定義對于一個經(jīng)典的事件監(jiān)聽函數(shù),明確一些概念
btn.addEventListener("click", function(){
//這個函數(shù)就是事件處理函數(shù)
console.log(1)
})
事件 === 用戶的動作 ===在上面的代碼就是 "click"
事件監(jiān)聽 === 上面的整個代碼 === 事件 + 事件處理函數(shù)
事件處理函數(shù) === 在上面的代碼就是console.log(1)
事件流 === 事件在 DOM 節(jié)點(diǎn)樹傳播的順序,可以是冒泡或者捕獲
?
冒泡階段和捕獲階段冒泡和捕獲階段測試 demo : http://js.jirengu.com/tofisal...
DOM
問題: 點(diǎn)擊4區(qū)域,解釋打印結(jié)果
注意點(diǎn):
div3 有兩個函數(shù),注意執(zhí)行順序
div3 之后有個×, 他的實(shí)現(xiàn)的代碼是什么?
問題: 如果我點(diǎn)擊3區(qū)域,打印什么?
打印冒泡2222, 3 ,33333
事件處理程序順序測試demo: http://js.jirengu.com/qoyoben...
點(diǎn)擊 3 區(qū)域,解釋打印內(nèi)容
總結(jié): 一個 DOM 結(jié)點(diǎn)事件處理程序的順序:
先捕獲后冒泡
哪個代碼在前面, 哪個代碼就先執(zhí)行
一般情況下, 是先看1,如果1相同,再看2
但是當(dāng) DOM 結(jié)點(diǎn)(如 demo 的 div4 )之后沒有 DOM 結(jié)點(diǎn), 那個按照第2條規(guī)則處理
事件處理函數(shù)內(nèi)添加事件監(jiān)聽
點(diǎn)擊3區(qū)域, 解釋打印內(nèi)容
代碼如下: http://js.jirengu.com/bonacob...
根據(jù)代碼畫出 DOM
從 div3 開始冒泡, 所以打印3, 2
改變需求: 點(diǎn)擊3區(qū)域的時候, 只打印3, 第二次點(diǎn)擊3區(qū)域的時候,打印3, 2
代碼: http://js.jirengu.com/jiresoy...
根據(jù)代碼畫出 DOM
總結(jié):
當(dāng)你給 DOM 節(jié)點(diǎn)的事件處理函數(shù)內(nèi)添加了一個事件監(jiān)聽A, 那么事件監(jiān)聽A是馬上添加到 DOM 中(也就是說剛添加的事件監(jiān)聽A在第一次點(diǎn)擊就能激活, 看第一個例子)
如果你想讓添加的事件監(jiān)聽A不是馬上添加到 DOM 中(也就是說剛添加的事件監(jiān)聽A在第二次點(diǎn)擊才能激活)那么可以使用setTimeout解決. (看第二個例子)
?
dismissible propover效果: http://js.jirengu.com/nanepev...
列出所有情況
注意點(diǎn):
什么時候用事件處理函數(shù)內(nèi)添加事件監(jiān)聽?
第二次與第一次的 DOM 結(jié)構(gòu)函數(shù)不同 + 第二次是在第一次的某種情況下(紅圈)
?
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90686.html
摘要：前言是以單線程的形式運(yùn)行在宿主環(huán)境下，采用了回調(diào)的形式來解決異步任務(wù)。線程中步就是在瀏覽器下的。 前言 javascript 是以單線程的形式運(yùn)行在宿主環(huán)境下，javascript 采用了回調(diào)的形式來解決異步任務(wù)。 為什么是單線程？ javascript 的最開始的出現(xiàn)是為了給 web 頁面增添一些動態(tài)的效果，那么就避免不了獲取頁面上的元素信息，如果 javascript 是以多線程的...
摘要：此事件隊(duì)列的美妙之處在于它只是函數(shù)等待被調(diào)用和移動到調(diào)用棧的一個臨時存放區(qū)域。在事件循環(huán)不斷監(jiān)視調(diào)用棧是否為空現(xiàn)在確實(shí)是空的時候調(diào)用創(chuàng)建一個新的調(diào)用棧來執(zhí)行代碼。在執(zhí)行完之后進(jìn)入了一個新的狀態(tài)這個狀態(tài)調(diào)用棧為空事件記錄表為空事件隊(duì)列也為空。 這篇文章是對個人認(rèn)為講解 JavaScript 事件循環(huán)比較清楚的一篇英文文章的簡單翻譯,原文地址是http://altitudelabs.com...
摘要：原文瀏覽器事件之間的關(guān)系程序采用了異步事件驅(qū)動編程模型，維基百科對它的解釋是事件驅(qū)動程序設(shè)計(jì)英語是一種電腦程序設(shè)計(jì)模型。 原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、瀏覽器、事件之間的關(guān)系 JavaScript 程序采用了異步事件驅(qū)動編程（Event-driven program...
摘要：可以使用偵聽器或處理程序來預(yù)訂事件，以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。響應(yīng)某個事件的函數(shù)稱為事件處理程序或事件偵聽器?？梢詣h除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實(shí)現(xiàn)的。 事件：文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。 可以使用偵聽器（或處理程序來預(yù)訂事件），以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。 1. 事件流 事件流：從頁面中接收事件的順序。 ...
摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點(diǎn)是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監(jiān)聽器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...
摘要：如果當(dāng)前沒有事件也沒有定時器事件，則返回。相關(guān)資料關(guān)于的架構(gòu)及設(shè)計(jì)思路的事件討論了使用線程池異步運(yùn)行代碼。下一篇初窺事件機(jī)制的實(shí)現(xiàn)二中定時器的實(shí)現(xiàn) 在瀏覽器中，事件作為一個極為重要的機(jī)制，給予JavaScript響應(yīng)用戶操作與DOM變化的能力；在Node.js中，事件驅(qū)動模型則是其高并發(fā)能力的基礎(chǔ)。 學(xué)習(xí)JavaScript也需要了解它的運(yùn)行平臺，為了更好的理解JavaScript的事...
閱讀 3240·2021-11-02 14:44
閱讀 3739·2021-09-02 15:41
閱讀 1682·2019-08-29 16:57
閱讀 1801·2019-08-26 13:38
閱讀 3310·2019-08-23 18:13
閱讀 2123·2019-08-23 15:41
閱讀 1685·2019-08-23 14:24
閱讀 3042·2019-08-23 14:03
