国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript 瀏覽器事件解析

spacewander / 3006人閱讀

摘要：原文瀏覽器事件之間的關系程序采用了異步事件驅動編程模型，維基百科對它的解釋是事件驅動程序設計英語是一種電腦程序設計模型。

原文：https://keelii.github.io/2016/09/29/javascript-browser-event/

JavaScript、瀏覽器、事件之間的關系

JavaScript 程序采用了異步事件驅動編程（Event-driven programming）模型，維基百科對它的解釋是：

事件驅動程序設計（英語：Event-driven programming）是一種電腦程序設計模型。這種模型的程序運行流程是由用戶的動作（如鼠標的按鍵，鍵盤的按鍵動作）或者是由其他程序的消息來決定的。相對于批處理程序設計（batch programming）而言，程序運行的流程是由程序員來決定。批量的程序設計在初級程序設計教學課程上是一種方式。然而，事件驅動程序設計這種設計模型是在交互程序（Interactive program）的情況下孕育而生的

簡頁言之，在 web 前端編程里面 JavaScript 通過瀏覽器提供的事件模型 API 和用戶交互，接收用戶的輸入

由于用戶的行為是不確定的，也就是說不知道用戶什么時候發生點擊、滾動這些動作。這種場景是傳統的同步編程模型沒法解決的，因為你不可能等用戶操作完了才執行后面的代碼

比如我們在 Python 里面調用接收用戶輸入的方法 raw_input() 后終端就會一直等待用戶的輸入，直到輸入完成才會執行后面的代碼邏輯。但是在下面這段 NodeJS 代碼中，接收用戶輸入的方法 process.stdin.read 是在一個事件中調用的。后面的代碼不會被阻塞（blocked）

"use strict";

process.stdin.on("readable", () => {
    var chunk = process.stdin.read();
    if (chunk !== null) {
        process.stdout.write(`Async output data: ${chunk}`);
    }
});

process.stdin.on("end", () => {
    process.stdout.write("end");
});

console.log("Will not be blocked");

事件驅動程序模型基本的實現原理基本上都是使用 事件循環（Event Loop），這部分內容涉及瀏覽器事件模型、回調原理，有興趣的去看鏈接里面的視頻學習下

需要說明的是在客戶端 JavaScript 中像 setTimeout, XMLHTTPRequest 這類 API 并不是 JavaScript 語言本身就有的。而是 JavaScript 的宿主環境（在客戶端 JavaScript 中就是瀏覽器），同樣像 DOM、BOM、Event API 都是瀏覽器提供的

事件綁定的方法 DOM 元素行內綁定

直接在 DOM 元素上通過設置 on + eventType 來綁定事件處理程序

點擊我

這種綁定方法是最原始的，有兩個缺點：

1 事件處理程序和 HTML 結構混雜在一起

早期在結構、樣式、表現分離的時代被視為最佳實踐，現在看來在很多 MVX 框架中將事件綁定和 DOM 結構放在一起處理，這樣似乎更方便維護（不用來回切換 HTML,JavaScript 文件），而且也符合可預見（predictable）性的規則

2 命名空間沖突

因為 onclick 中的 JavaScript 代碼片段執行環境是全局作用域。然而在 JavaScript 語言中并沒有相關的命名空間特性。所以就很容易造成命名空間的沖突，非要用這種方法綁定事件的話只能用對象來做一些封裝

古老的綁定方法

使用 DOM Element 上面的 on + eventType 屬性 API

click me

這種方法也有一個缺點，因為屬性賦值會覆蓋原值的。所以無法綁定 多個 事件處理函數，如果我們要注冊多個 onload 事件處理程序的話就得自己封裝一個方法來防止這種事情發生，下面這個例子可以解決這個問題

注意這只是個示例，生產環境很少會用到。一般用 DOM Ready 就可以了，因為 JavaScript 的執行通常不用等到頁面資源全部加載完，DOM 加載完就可以了

現代/標準的綁定方法

標準的綁定方法有兩種，addEventListener 和 attachEvent 前者是標準瀏覽器支持的 API，后者是 IE 8 以下瀏覽器支持的 API。通常需要我們做個兼容封裝

上面的例子在 IE 8 以下和標準瀏覽器的效果是不一樣的，問題就在于 addEventListener 中的事件回調函數中的 this 指向元素（target）本身，而 attachEvent 則指向 window 為了修復這個問題上面的 attachEvent 可以做一點小調整讓其保持和 addEventListener 的效果一樣，不過這樣的話注冊的 handler 就是個匿名函數，無法再移除！

當上面這幾種情況同時出現的時候就比較有意思了，可以試試下面這段代碼的你輸出

click me

正確的結果應該是 3,4,5,1，根據結果我們可以得出以下結論：

鏈接上的 href 偽 javascript 協議相當于在瀏覽器地址欄執行了一段 JavaScript 代碼，鏈接如果是這種格式，點擊的時候相當于執行了這段 JavaScript 腳本

行內的事件綁定和元素調用 onclick 綁定事件會覆蓋

使用 jQuery（內部使用標準事件注冊 API）可以綁定多個事件處理程序

事件冒泡

大部分事件會沿著事件觸發的目標元素往上傳播。比如：body>div>p>span 如果他們都注冊了點擊事件，那么在 span 元素上觸發點擊事件后 p,div,body 各自的點擊事件也會按順序觸發

事件冒泡是可以被停止的，下面這個函數封閉了停止事件冒泡的方法：

事件對象

標準瀏覽器中在事件處理程序被調用時 事件對象 會通過參數傳遞給處理程序，IE 8 及以下瀏覽器中事件對象可以通過全局的 window.event 來訪問。比如我們要獲取當前點擊的 DOM Element

事件代理

有時候我們需要給 不存在的（可能將來會有）的一段 DOM 元素綁定事件，比如給一段 Ajax 請求完成后渲染的 DOM 節點綁定事件。一般綁定的邏輯會在渲染前執行，綁定的時候找不到元素所以并不能成功，當然你也可以把綁定事件的代碼放在 Ajax 請求之后。這樣做在一些事件邏輯簡單的應用里面沒問題，但是會加重數據渲染邏輯和事件處理的邏輯耦合。一但事件處理程序特別多的時候，我們通常建議把事件的邏輯和其它代碼邏輯分離，這樣方便維護。

為了解決這個問題，我們通常使用事件代理/委托（Event Delegation ）。而且通常來說使用 事件代理的性能會比多帶帶綁定事件高 很多，我們來看個例子

    
    
  • item1
    • 
    
  • item2
    • 
    
  • item3
    • 
    
  • item4
    • 
    
  • item5
    •

假如 ul 中的 HTML 是 Ajax 異步插入的，通常我們的做法是 插入完成后遍歷每個 li 綁定事件處理程序

    我們再使用事件代理把事件綁定到 ul 元素上，我們知道很多事件可以冒并沿著 DOM 樹傳播到所有的父元素上，我們只需要判斷目標元素是不是我們想綁定的真正元素即可

      顯然使用了事件代理之后，代碼變少了。邏輯也很清晰，關鍵是以前需要 N 次的綁定操作現在只需要一次

      jQuery 中的事件綁定

      以 jQuery1.6.4 為例，jQuery 提供了很多事件綁定的 API。例如： delegate(), bind(), click(), hover(), one(), live()，這些方法其實都是一些別名，核心是調用了 jQuery 底層事件的 jQuery.event.add 方法。其實現也是上文提到的 addEventListener 和 attachEvent 兩個 API

      這些 API 主要是為了方便綁定事件的各種場景，并且內部處理好了兼容性問題。還有一個比較好用的地方就是 事件命名空間。比如：兩個彈出層都向 document 綁定了點擊關閉事件，但是如果只想解綁其中一個。這時候使用命名空間再合適不過了。可以試試這個小例子 Event Binding

      自定義事件與發布/訂閱者設計模式

      自定義事件是設計模式中的 發布/訂閱者 的一種實現。發布者與訂閱者松散地耦合，而且不需要關心對方的存在。這里有 NC 大師的一種實現。實際使用過程中，主要被運用在異步操作比較多的場景和不同系統之間消息通信，之前的文章中有過一些實例

      引用

      事件驅動程序設計

      Introduction to Events

      Custom events in JavaScript

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

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

      相關文章

      • 瀏覽器渲染機制

        摘要：修改瀏覽器渲染因為的阻塞使得解析停止，下載完成之前，頁面無法顯示任何東西。瀏覽器渲染解析到文件時出現阻塞。我們把調整到尾部瀏覽器渲染這是頁面可以渲染了，但是沒有樣式。 本文示例源代碼請戳github博客，建議大家動手敲敲代碼。 前言 瀏覽器渲染頁面的過程 從耗時的角度，瀏覽器請求、加載、渲染一個頁面，時間花在下面五件事情上： DNS 查詢 TCP 連接 HTTP 請求即響應 服務器響...

        FullStackDeveloper 評論0 收藏0

      • 瀏覽器渲染機制

        摘要：修改瀏覽器渲染因為的阻塞使得解析停止，下載完成之前，頁面無法顯示任何東西。瀏覽器渲染解析到文件時出現阻塞。我們把調整到尾部瀏覽器渲染這是頁面可以渲染了，但是沒有樣式。 本文示例源代碼請戳github博客，建議大家動手敲敲代碼。 前言 瀏覽器渲染頁面的過程 從耗時的角度，瀏覽器請求、加載、渲染一個頁面，時間花在下面五件事情上： DNS 查詢 TCP 連接 HTTP 請求即響應 服務器響...

        gougoujiang 評論0 收藏0

      • JavaScript學習筆記

        摘要：因為即使包含了其他的代碼，也只會下載并執行屬性內的外部腳本文件，嵌入的額外代碼會被忽略。在腳本中，如果程序員在對某個變量賦值之前未聲明，賦值操作將自動聲明該變量。共有中數據類型。阻止事件冒泡火狐瀏覽器創建元素添加子元素刪除子元素數組拼接方法 所有的web開發都是【請求】+【響應】 推薦JavaScript中使用單引號引用字符串，HTML中使用雙引號，防止沖突 JavaScript代碼...

        2shou 評論0 收藏0

      • 深入前端-徹底搞懂瀏覽器運行機制

        摘要：當這些異步任務發生的時候，它們將會被放入瀏覽器的事件任務隊列中去，等到運行時執行線程空閑時候才會按照隊列先進先出的原則被一一執行，但終究還是單線程。 瀏覽器是多進程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser進程： 瀏覽器的主進程（負責協調、主控），只有一個。 負...

        YPHP 評論0 收藏0

      • 深入前端-徹底搞懂瀏覽器運行機制

        摘要：當這些異步任務發生的時候，它們將會被放入瀏覽器的事件任務隊列中去，等到運行時執行線程空閑時候才會按照隊列先進先出的原則被一一執行，但終究還是單線程。 瀏覽器是多進程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser進程： 瀏覽器的主進程（負責協調、主控），只有一個。 負...

        Youngs 評論0 收藏0

      發表評論

      0條評論

      spacewander

      男|高級講師

      TA的文章

      閱讀更多
      最新活動
      閱讀需要支付1元查看
      <