av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

JavaScript瀏覽器事件解析

JavaScript 程序采用了異步事件驅(qū)動(dòng)編程(Event-driven programming)模型，維基百科對(duì)它的解釋是：

事件驅(qū)動(dòng)程序設(shè)計(jì)(英語：Event-driven programming)是一種電腦程序設(shè)計(jì)模型。這種模型的程序運(yùn)行流程是由用戶的動(dòng)作(如鼠標(biāo)的按鍵，鍵盤的按鍵動(dòng)作)或者是由其他程序的消息來決定的。相對(duì)于批處理程序設(shè)計(jì)(batch programming)而言，程序運(yùn)行的流程是由程序員來決定。批量的程序設(shè)計(jì)在初級(jí)程序設(shè)計(jì)教學(xué)課程上是一種方式。然而，事件驅(qū)動(dòng)程序設(shè)計(jì)這種設(shè)計(jì)模型是在交互程序(Interactive program)的情況下孕育而生的

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

由于用戶的行為是不確定的，也就是說不知道用戶什么時(shí)候發(fā)生點(diǎn)擊、滾動(dòng)這些動(dòng)作。這種場景是傳統(tǒng)的同步編程模型沒法解決的，因?yàn)槟悴豢赡艿扔脩舨僮魍炅瞬艌?zhí)行后面的代碼

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

 
 
    
  
  
  1. 'use strict'; 
    2. 
  
  
  2.  
    3. 
  
  
  3. process.stdin.on('readable', () => { 
    4. 
  
  
  4.     var chunk = process.stdin.read(); 
    5. 
  
  
  5.     if (chunk !== null) { 
    6. 
  
  
  6.         process.stdout.write(`Async output data: ${chunk}`); 
    7. 
  
  
  7.     } 
    8. 
  
  
  8. }); 
    9. 
  
  
  9.  
    10. 
  
  
  10. process.stdin.on('end', () => { 
    11. 
  
  
  11.     process.stdout.write('end'); 
    12. 
  
  
  12. }); 
    13. 
  
  
  13.  
    14. 
  
  
  14. console.log('Will not be blocked');  
    15.

事件驅(qū)動(dòng)程序模型基本的實(shí)現(xiàn)原理基本上都是使用 事件循環(huán)(Event Loop)，這部分內(nèi)容涉及瀏覽器事件模型、回調(diào)原理，有興趣的去看鏈接里面的視頻學(xué)習(xí)下

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

事件綁定的方法

DOM 元素行內(nèi)綁定

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

 
 
    
  
  
  1. 點(diǎn)擊我 
    2.

這種綁定方法是最原始的，有兩個(gè)缺點(diǎn)：

1 事件處理程序和 HTML 結(jié)構(gòu)混雜在一起

早期在結(jié)構(gòu)、樣式、表現(xiàn)分離的時(shí)代被視為***實(shí)踐，現(xiàn)在看來在很多 MVX 框架中將事件綁定和 DOM 結(jié)構(gòu)放在一起處理，這樣似乎更方便維護(hù)(不用來回切換 HTML,JavaScript 文件)，而且也符合可預(yù)見(predictable)性的規(guī)則

2 命名空間沖突

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

古老的綁定方法

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

 
 
    
  
  
  1. click me 
    2. 
  
  
  2.   
    3.

這種方法也有一個(gè)缺點(diǎn)，因?yàn)閷傩再x值會(huì)覆蓋原值的。所以無法綁定 多個(gè) 事件處理函數(shù)，如果我們要注冊多個(gè) onload 事件處理程序的話就得自己封裝一個(gè)方法來防止這種事情發(fā)生，下面這個(gè)例子可以解決這個(gè)問題

 
 
    
  
  
  1.   
    2.

注意這只是個(gè)示例，生產(chǎn)環(huán)境很少會(huì)用到。一般用 DOM Ready 就可以了，因?yàn)?JavaScript 的執(zhí)行通常不用等到頁面資源全部加載完，DOM 加載完就可以了

現(xiàn)代/標(biāo)準(zhǔn)的綁定方法

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

 
 
    
  
  
  1.   
    2.

上面的例子在 IE 8 以下和標(biāo)準(zhǔn)瀏覽器的效果是不一樣的，問題就在于 addEventListener 中的事件回調(diào)函數(shù)中的 this 指向元素(target)本身，而 attachEvent 則指向 window 為了修復(fù)這個(gè)問題上面的 attachEvent 可以做一點(diǎn)小調(diào)整讓其保持和addEventListener 的效果一樣，不過這樣的話注冊的 handler 就是個(gè)匿名函數(shù)，無法再移除!

 
 
    
  
  
  1.   
    2.

當(dāng)上面這幾種情況同時(shí)出現(xiàn)的時(shí)候就比較有意思了，可以試試下面這段代碼的你輸出

 
 
    
  
  
  1. click me 
    2. 
  
  
  2.   
    3.

正確的結(jié)果應(yīng)該是 3,4,5,1，根據(jù)結(jié)果我們可以得出以下結(jié)論：

  • 鏈接上的 href 偽 javascript 協(xié)議相當(dāng)于在瀏覽器地址欄執(zhí)行了一段 JavaScript 代碼，鏈接如果是這種格式，點(diǎn)擊的時(shí)候相當(dāng)于執(zhí)行了這段 JavaScript 腳本
  • 行內(nèi)的事件綁定和元素調(diào)用 onclick 綁定事件會(huì)覆蓋
  • 使用 jQuery(內(nèi)部使用標(biāo)準(zhǔn)事件注冊 API)可以綁定多個(gè)事件處理程序

事件冒泡

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

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

 
 
    
  
  
  1.   
    2.

事件對(duì)象

標(biāo)準(zhǔn)瀏覽器中在事件處理程序被調(diào)用時(shí) 事件對(duì)象 會(huì)通過參數(shù)傳遞給處理程序，IE 8 及以下瀏覽器中事件對(duì)象可以通過全局的window.event 來訪問。比如我們要獲取當(dāng)前點(diǎn)擊的 DOM Element

 
 
    
  
  
  1.   
    2.

事件代理

有時(shí)候我們需要給 不存在的(可能將來會(huì)有)的一段 DOM 元素綁定事件，比如給一段 Ajax 請(qǐng)求完成后渲染的 DOM 節(jié)點(diǎn)綁定事件。一般綁定的邏輯會(huì)在渲染前執(zhí)行，綁定的時(shí)候找不到元素所以并不能成功，當(dāng)然你也可以把綁定事件的代碼放在 Ajax 請(qǐng)求之后。這樣做在一些事件邏輯簡單的應(yīng)用里面沒問題，但是會(huì)加重?cái)?shù)據(jù)渲染邏輯和事件處理的邏輯耦合。一但事件處理程序特別多的時(shí)候，我們通常建議把事件的邏輯和其它代碼邏輯分離，這樣方便維護(hù)。

為了解決這個(gè)問題，我們通常使用事件代理/委托(Event Delegation )。而且通常來說使用 事件代理的性能會(huì)比單獨(dú)綁定事件高 很多，我們來看個(gè)例子

 
 
    
  
  
  1.  
    2. 
  
  
  2.  
    3. 
  
  
  3. item1
    4.  
  
  
  4.  
    5. 
  
  
  5. item2
    6.  
  
  
  6.  
    7. 
  
  
  7. item3
    8.  
  
  
  8.  
    9. 
  
  
  9. item4
    10.  
  
  
  10.  
    11. 
  
  
  11. item5
    12.  
  
  
  12.  
    13. 
  
  
  13.   
    14.

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

 
 
    
  
  
  1.  
    2. 
  
  
  2.   
    3.

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

 
 
    
  
  
  1.  
    2. 
  
  
  2.   
    3.

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

jQuery 中的事件綁定

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

這些 API 主要是為了方便綁定事件的各種場景，并且內(nèi)部處理好了兼容性問題。還有一個(gè)比較好用的地方就是 事件命名空間。比如：兩個(gè)彈出層都向 document 綁定了點(diǎn)擊關(guān)閉事件，但是如果只想解綁其中一個(gè)。這時(shí)候使用命名空間再合適不過了?？梢栽囋囘@個(gè)小例子 Event Binding

 
 
    
  
  
  1.   
    2.

自定義事件與發(fā)布/訂閱者設(shè)計(jì)模式

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

引用

  • 事件驅(qū)動(dòng)程序設(shè)計(jì)
  • Introduction to Events
  • Custom events in JavaScript

網(wǎng)頁名稱：JavaScript瀏覽器事件解析
地址分享：http://uogjgqi.cn/article/ccogigc.html
掃二維碼與項(xiàng)目經(jīng)理溝通

我們在微信上24小時(shí)期待你的聲音

解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流