JavaScript學習總結【10】、DOM 事件

来源:http://www.cnblogs.com/Mtime/archive/2016/01/12/5121172.html
-Advertisement-
Play Games

DOM 事件是 JS 中比較重要的一部分知識，所謂事件，簡單理解就是用戶對瀏覽器進行的一個操作。事件在 Web 前端領域有很重要的地位，很多重要的知識點都與事件有關，所以學好 JS 事件可以讓我們在JS的學習道路中更進一步。 1、事件流 事件流描述的是從頁面中接受事件的順序。但是 IE 和 ...


　　DOM 事件是 JS 中比較重要的一部分知識，所謂事件，簡單理解就是用戶對瀏覽器進行的一個操作。事件在 Web 前端領域有很重要的地位，很多重要的知識點都與事件有關，所以學好 JS 事件可以讓我們在JS的學習道路中更進一步。

　　1、事件流

　　事件流描述的是從頁面中接受事件的順序。但是 IE 和 Netscape 開發團隊提出了兩個截然相反的事件流概念，IE 的事件流是事件冒泡流，而 Netscape 的事件流是事件捕獲流。

　　(1)、事件冒泡

　　事件冒泡，即事件最開始由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然後逐級向上傳播至最不具體的節點（document）。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件流</title>
 6     
 7 </head>
 8 <body>
 9     <div>
10         <input type="button" value="按鈕">
11     </div>
12 </body>
13 </html>

 　　上面的實例，在點擊按鈕之後，click事件會按照如下的順序逐級傳播：

　　input -> div -> body -> html -> document

　　所有現代的瀏覽器都支持事件冒泡，但是在具體的實現上又有一些差別：

　　IE5.5及更早版本中的事件冒泡會跳過 html 元素（從 body 直接跳到 document）。

　　IE9、Firefox、Chrome 和 Safari 則將事件一直冒泡到 window 對象。

　　(2)、事件捕獲

　　事件捕獲的思想是不太具體的 DOM 節點應該更早接收到事件，而最具體的節點最後接收到事件。

　　按照事件捕獲的思想，上面的實例，click事件將會以如下的順序逐級傳播：

　　document -> html -> body -> div -> input

　　事件捕獲和事件冒泡的傳播順序正好是相反的，雖然事件捕獲是 Netscape 唯一支持的事件流模型，但 IE9、Safari、Chrome、Opera 和 Firefox 目前也都支持這種事件流模型。

　　(3)、DOM 事件流

　　"DOM2級事件" 規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。即同時支持冒泡和捕獲，在任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了最具體的元素，然後，再從最具體的元素向上進行事件冒泡，直到到達 document 。

　　在 DOM 事件流中，實際的目標在捕獲階段不會接收事件。就是說在捕獲階段，事件從 document 到 html 再到 body 後就停止了。下一個階段是“處於目標”階段，於是事件在div中發生，併在事件處理中被看成是冒泡階段的一部分。然後，冒泡階段發生。IE8及更早的版本不支持DOM事件流，瀏覽器在捕獲階段觸發事件對象上的事件，結果就是有兩個機會在目標對象上面操作事件。

　　2、事件處理程式

　　(1)、HTML 事件處理程式

　　HTML 事件處理程式就是直接把事件添加在 HTML 結構中。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     
 7 </head>
 8 <body>
 9     <input type="button" value="按鈕" onclick="alert('Hello')">
10 </body>
11 </html>

　　也可以調用在頁面中其他地方定義的腳本：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     
 7 </head>
 8 <body>
 9     <input type="button" value="按鈕" onclick="show()">
10     <script>
11     function show(){
12         alert('Hello');
13     }
14     </script>
15 </body>
16 </html>

 

　　事件處理程式中的代碼在執行時，有權訪問全局作用域中的任何代碼。

　　這樣使用會創建一個封裝著的元素屬性值的函數。這個函數有一個局部變數 event ，也就是事件對象：

<input type="button" value="按鈕" onclick="alert(event.type)">

　　上面的代碼返回：click

<input type="button" value="按鈕" onclick="alert(event.target)">

 　　上面的代碼返回：input 元素

　　其中，this 值等於事件的目標元素，如：

<input type="button" value="按鈕" onclick="alert(this.value)">

 　　上面的代碼返回：按鈕

 　　所謂的事件對象就是 event，在觸發 DOM 上的事件時都會產生一個事件對象。

　　type：用於獲取事件類型。target：用於獲取事件目標。

　　而在 IE8 及更早版本獲取事件目標要使用 srcElement 屬性代替。

　　所有現代瀏覽器引用事件對象，都可以直接使用 event 引用，而在 IE8 及之前版本的瀏覽器則需要使用 window.event 引用。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     
 7 </head>
 8 <body>
 9     <input type="button" value="按鈕" onclick="show()" >
10     <script>
11     function show(ev){
12         ev = event || window.event;
13         var ele = ev.target || ev.srcElement;
14         alert(ele);
15     }
16     </script>
17 </body>
18 </html>

 　　HTML事件處理程式的缺點：HTML 代碼和 JS 代碼緊密的耦合在一起，如果需要對事件做出更改，那麼 JS 代碼和 HTML 代碼都需要更改。所以應該使用 JS 指定的事件處理程式。

　　(2)、JS 傳統事件處理程式

　　JS 中非常傳統的方式，就是在一個元素上直接綁定方法，即先獲取元素，再以屬性方式添加事件。

　　該方式也叫做 DOM0級 事件處理程式。element.onclick = function(e){}

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     
 7 </head>
 8 <body>
 9     <input type="button" value="按鈕" id="btn">
10     <script>
11     var oBtn = document.getElementById('btn');
12     oBtn.onclick = function (){
13         alert('Hello');
14     }
15     </script>
16 </body>
17 </html>

　　把一個函數賦值給一個事件處理程式的屬性，這是用的比較多的方式，非常簡單而且穩定，可適應不同的瀏覽器，但是這樣的事件綁定只會在事件冒泡中運行，捕獲不行，且一個事件每次只能綁定一個事件函數。

　　使用該方式指定的事件處理程式被認為是元素的方法，因此，這時候的事件處理程式是在元素的作用域中運行的，也就是 this 指向當前元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    
</head>
<body>
    <input type="button" value="按鈕" id="btn">
    <script>
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function (){
        alert(this.type);
    }
    </script>
</body>
</html>

 　　上面的代碼返回：button 

 　　DOM0級 在刪除事件時，直接讓事件等於空。如：oBtn.onclick=null;

　　(3)、W3C 事件處理程式

　　W3C 中推薦使用 addEventListener() 函數進行事件綁定，使用 removeEventListener() 函數刪除事件。這種方式也叫做 DOM2級 事件處理程式，它們都接收三個參數：要處理的事件名、作為事件處理程式的函數和一個布爾值。

　　通常事件監聽都是添加在冒泡階段，所以添加事件的布爾值為 false。element.addEventListener('click', function (){...}, false)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     
 7 </head>
 8 <body>
 9     <input type="button" value="按鈕" id="btn">
10     <script>
11     var oBtn = document.getElementById('btn');
12     oBtn.addEventListener('click', function (){
13         alert('Hello');
14     }, false);
15     </script>
16 </body>
17 </html>

　　該方式和前邊傳統方式綁定事件的效果是一樣的，這種方式綁定同時支持冒泡和捕獲，addEventListener() 函數最後的參數表達了事件處理的階段：false(冒泡)，true(捕獲)。這種方式最重要的好處就是對同一元素的同一個類型事件做綁定不會覆蓋，比如上面代碼中，再給 oBtn 綁定一個 click 事件，那麼兩次綁定的事件都會被執行，按照代碼的順序依次執行。

　　通過 addEventListener() 函數添加的事件只能通過 removeEventListener() 函數刪除，在刪除事件時，必須傳入與添加事件相同的參數。所以，用 addEventListener() 添加的匿名函數將無法移除。

　　DOM2級 方式和DOM0級 方式都可以給一個元素添加多個事件，添加的多個事件依次按順序執行。

　　大多數情況下，都是將事件處理程式添加到事件流的冒泡階段，這樣可以最大限度地相容各種瀏覽器。

　　(4)、IE 中的事件處理程式

　　在 IE 瀏覽器下不支持 addEventListener() 函數，只能在 IE9 以上(包括IE9)可以使用，IE 瀏覽器相應的要使用 attachEvent() 函數代替。

　　刪除事件則使用 detachEvent() 函數。這兩個方法接收相同的兩個參數：事件處理程式名稱與事件處理函數。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     
 7 </head>
 8 <body>
 9     <input type="button" value="按鈕" id="btn">
10     <script>
11     var oBtn = document.getElementById('btn');
12     oBtn.attachEvent('onclick', function (){
13         alert('Hello');
14     });
15     </script>
16 </body>
17 </html>

　　attachEvent() 函數支持事件捕獲的冒泡階段，同時它不會覆蓋事件的綁定。如果在 Firefox、Chrome 等其他內核的瀏覽器中使用這個函數去綁定事件，瀏覽器會報錯。

如果需要做跨瀏覽器的事件處理程式，則需要做相容性處理，即判斷是否支持 attachEvent 方法，如果支持就使用該方法，如果不支持則使用 addEventListener() 方法。

　　這裡需要註意： attachEvent() 的第一個參數是“onclick”,而不是 addEventListener()方法中的“click"。

　　3、事件流阻止

　　事件流阻止，這裡阻止的是它的繼續傳播以及有可能產生的預設動作。

　　在一些情況下我們需要阻止事件流的傳播，也就是阻止事件的向上冒泡。

　　某些事件的對象是可以取消的，這也意味著可以阻止預設動作的發生。

　　W3C 中定義了兩個方法：stopPropagation() 和 preventDefault() 用於阻止事件流。

　　event.stopPropagation() 方法用於阻止事件冒泡。

　　event.preventDefault() 方法用於阻止事件的預設行為。

　　阻止事件的預設行為在做移動端app時，用的比較多，比如 a 鏈接的跳轉，不跳轉新頁面，而是跳轉不同的位置。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     
 7 </head>
 8 <body>
 9 <div id="box">
10     <a href="http://www.baidu.com" id="go">跳轉</a>
11 </div>
12     <script>
13     var oDiv = document.getElementById('box');
14     var oA = document.getElementById('go');
15     oDiv.onclick = function (){
16         alert('我是a鏈接的父容器');
17     }
18     oA.onclick = function (ev){
19         ev.stopPropagation();
20         ev.preventDefault();
21     }
22     </script>
23 </body>
24 </html>

 　　上面的例子中，點擊 a 鏈接後有一個預設的跳轉行為，並且瀏覽器會認為你點了 a 鏈接，也就點了其父容器 div 元素。阻止了事件冒泡和預設行為之後，再點擊跳轉，就不會有任何響應了。

　　stopPropagation() 和 preventDefault() 這兩個方法都可以阻止事件，前者是取消事件流的繼續冒泡，但是 IE8 及以前的版本不支持該方法。而後者是告訴瀏覽器不要執行與事件相關聯的預設動作，比如 submit 類型的按鈕點擊會提交。如果直接使用 return false 則表示終止處理函數。

　　在 IE8 及之前版本的瀏覽器中沒有定義阻止事件流的方法，而是使用屬性，cancelBubble 屬性值為 true 時取消事件冒泡。returnValue 屬性值為 false 時阻止事件的預設行為。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     
 7 </head>
 8 <body>
 9 <div id="box">
10     <a href="http://www.baidu.com" id="go">跳轉</a>
11 </div>
12     <script>
13     var oDiv = document.getElementById('box');
14     var oA = document.getElementById('go');
15     oDiv.onclick = function (){
16         alert('我是a鏈接的父容器');
17     }
18     oA.onclick = function (ev){
19         ev = event || window.event;
20         if(ev.stopPropagation){
21             ev.stopPropagation();
22         }
23         else{
24             ev.cancelBubble = true;
25         }
26         if(ev.preventDefault){
27             ev.preventDefault();
28         }
29         else{
30             ev.returnValue = false;
31         }
32     }
33     </script>
34 </body>
35 </html>

 　　上面的代碼，是相容性寫法，不管是現代的瀏覽器還是 IE8 及更早版本的瀏覽器都可以使用。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自定義帶彈性效果的pageControl
    分三部分實現，在drawrect方法里畫出灰色背景，根據pageCount創建對應個數的dotView放置在對應位置，並隱藏，創建一個CAShapeView類型的layer，根據scrollView的偏移量 構建貝塞爾曲線，畫出紅色線條，以及形變的大圓。大圓的形變以及構建思路：（圖引用自：http:...
  • Objective-C代碼規範(2016.1.12王彬)
    Objective-C代碼規範
  • 【代碼筆記】點擊任何處，顯示出紅色的UIView
    一，效果圖。二，工程圖。三，代碼。RootViewController.h#import //頭文件#import "MoreView.h"@interface RootViewController : UIViewController{ //是否點擊 BOOL isSwitch; ...
  • [iOS]iPhone進行真機測試（基礎版）
    買完688個人開發者賬號之後，如何進行真機測試呢？？看下麵1.打開https://developer.apple.com然後，輸入我們買過688點那個App ID帳號和密碼哦！！一定是要支付過的！登陸後，如果你的頁面不像下麵的話，證明你的帳號不是支付過688元的帳號 （或者沒有激活。如果沒有激活請聯...
  • 火狐瀏覽器下連接a下無法使用select下拉菜單
    火狐瀏覽器下連接a下無法使用select下拉菜單:如果select下拉菜單包裹在鏈接a中，則無法實現選中效果，當然如此使用在實際應用中也是很少見的，不過下麵還是做一下簡單介紹，如何避免此種問題的出現，寄希望能夠給需要者帶來一定的幫助。代碼實例如下: 螞...
  • 動態等比例調整圖片大小的jQuery代碼
    動態等比例調整圖片大小的jQuery代碼:有時候圖片的大小和尺寸是位置，如果上傳後，任由其自然伸展，很有可能導致網頁變形，所以要認為的控製圖片的尺寸，當然也不能夠太粗暴，直接定死圖片的尺寸，這樣可能會導致圖片變形，所以要進行等比例縮放，下麵就是一段能夠實現此功能的代碼。代碼如下:原文地址是:http...
  • javascript刪除所有cookie實例代碼
    javascript刪除所有cookie實例代碼:一般情況下都是刪除指定的cookie，當然也可以一次性刪除所有的cookie，下麵就是一段能夠實現此功能的代碼。代碼如下:function clearCookie(){ var keys=document.cookie.match(/[^ =;].....
  • JavaScript學習筆記——JS中的變數複製、參數傳遞和作用域鏈
    今天在看書的過程中，又發現了自己目前對Javascript存在的一個知識模糊點：JS的作用域鏈，所以就通過查資料看書對作用域鏈相關的內容進行了學習。今天學習筆記主要有這樣幾個關鍵字：變數、參數傳遞、執行環境、變數對象、作用域鏈。 1.變數 變數需要註意的有兩點：變數聲明和複製變數值。 變數...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類