日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript瀏覽器事件

JavaScript、瀏覽器、事件之間的關(guān)系

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了淇縣免費(fèi)建站歡迎大家使用！

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

事件驅(qū)動(dòng)程序設(shè)計(jì)(英語：Event-driven programming)是一種電腦程序設(shè)計(jì)模型。這種模型的程序運(yùn)行流程是由用戶的動(dòng)作(如鼠標(biāo)的按鍵，鍵盤的按鍵動(dòng)作)或者是由其他程序的消息來決定的。相對于批處理程序設(shè)計(jì)(batch programming)而言，程序運(yùn)行的流程是由程序員來決定。批量的程序設(shè)計(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í)代很忌諱這一點(diǎn)?，F(xiàn)在看來在很多 MVX 框架中將事件綁定和 DOM 結(jié)構(gòu)放在一起處理，這樣似乎更方便維護(hù)(不用來回切換 HTML,JavaScript 文件)，而且也符合可預(yù)見(predictable)性的規(guī)則

2 命名空間沖突

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

古老的綁定方法

使用 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. function addLoadEvent(fn) { 
    2.   
  
  2.     var oldonLoad = window.onload; 
    3.   
  
  3.     if (typeof oldonLoad !== 'function') { 
    4.   
  
  4.         window.onload = fn; 
    5.   
  
  5.     } else { 
    6.   
  
  6.         window.onload = function() { 
    7.   
  
  7.             oldonLoad(); 
    8.   
  
  8.             fn(); 
    9.   
  
  9.         } 
    10.   
  
  10.     } 
    11.   
  
  11. } 
    12.   
  
  12.  
    13.   
  
  13. addLoadEvent(function() { alert('onload 1') }); 
    14.   
  
  14. addLoadEvent(function() { alert('onload 2') }); 
    15.

注意這只是個(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. function addEvent(target, type, handler) { 
    2.   
  
  2.     if (target.addEventListener) { 
    3.   
  
  3.         target.addEventListener(type, handler, false); 
    4.   
  
  4.     } else { 
    5.   
  
  5.         target.attachEvent('on' + type, handler) 
    6.   
  
  6.     } 
    7.   
  
  7. } 
    8.   
  
  8.  
    9.   
  
  9. addEvent(document, 'click', function() { alert(this === document) }); 
    10.   
  
  10. addEvent(document, 'click', function() { alert(this === document) }); 
    11.

上面的例子在 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. function addEvent(target, type, handler) { 
    2.   
  
  2.     if (target.addEventListener) { 
    3.   
  
  3.         target.addEventListener(type, handler, false); 
    4.   
  
  4.     } else { 
    5.   
  
  5.         target.attachEvent('on' + type, function() { 
    6.   
  
  6.             return handler.call(target) 
    7.   
  
  7.         }); 
    8.   
  
  8.     } 
    9.   
  
  9. } 
    10.   
  
  10.  
    11.   
  
  11. addEvent(document, 'click', function() { alert(this === document) }); 
    12.

當(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. function stopPropagation(event) { 
    2.   
  
  2.     event = event || window.event; 
    3.   
  
  3.     if (event.stopPropagation) { 
    4.   
  
  4.         event.stopPropagation() 
    5.   
  
  5.     } else {// IE 
    6.   
  
  6.         event.cancelBubble = true 
    7.   
  
  7.     } 
    8.   
  
  8. } 
    9.   
  
  9.  
    10.   
  
  10. addEvent('ele', 'click', function(e) { 
    11.   
  
  11.     // click handler 
    12.   
  
  12.     stopPropagation(e); 
    13.   
  
  13. }); 
    14.

事件對象

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

 
 
    
  
  
  1. addEvent(document, 'click', function(event) { 
    2.   
  
  2.     // IE 8 以下 => undefined 
    3.   
  
  3.     console.log(event); 
    4.   
  
  4. }); 
    5.   
  
  5. addEvent(document, 'click', function(event) { 
    6.   
  
  6.     event = event || window.event; 
    7.   
  
  7.     // 標(biāo)準(zhǔn)瀏覽器 => [object HTMLHtmlElement] 
    8.   
  
  8.     // IE 8 以下 => undefined 
    9.   
  
  9.     console.log(event.target); 
    10.   
  
  10.     var target = event.target || event.srcElement; 
    11.   
  
  11.  
    12.   
  
  12.     console.log(target.tagName); 
    13.   
  
  13. }); 
    14.

事件代理

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

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

 
 
    
  
  
  1.  
    2.   
  
  2.     item1
    3.    
  
  3.     item2
    4.    
  
  4.     item3
    5.    
  
  5.     item4
    6.    
  
  6.     item5
    7.    
  
  7.  
    8.

假如 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. $(document).bind('click.handler1', function() { console.log(1);}) 
    2.   
  
  2. $(document).bind('click.handler2', function() { console.log(2);}) 
    3.   
  
  3.  
    4.   
  
  4. $(document).unbind('click.handler2');   // 解除指定的 
    5.   
  
  5. $(document).unbind('click');            // 解除所有點(diǎn)擊事件 
    6.   
  
  6. $(document).unbind()                    // 解除所有事件 
    7.

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

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

引用

事件驅(qū)動(dòng)程序設(shè)計(jì)

Introduction to Events

Custom events in JavaScript


文章標(biāo)題：JavaScript瀏覽器事件
網(wǎng)站URL：http://www.5511xx.com/article/dhjshgd.html