對於函數事件的總結-js教程-PHP中文網

首頁

web前端

js教程

對於函數事件的總結

jacklove

May 21, 2018 pm 03:42 PM

js 事件函數

在學習函數的時候會遇見很多的函數事件，本篇將對其進行詳細的講解。

什麼是事件？

JavaScript與HTML之間的互動是透過事件實現的。事件，就是文件或瀏覽器視窗中發生的一些特定的互動瞬間。可以使用監聽器（或處理程序）來預定事件，以便在事件發生時執行對應的程式碼。這種在傳統軟體工程中被稱為觀察員模式的模型，支援頁面的行為（JavaScript）與頁面的外觀（HTML與CSS）之間的鬆散耦合。

事件流

事件流描述的是從頁面中接受事件的順序。假設如下程式碼：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <div id="div1"></div></body></html>

登入後複製

點擊div，這個點擊不只發生在div上，其父容器body也會被點擊。那到底誰先被點擊或說事件是怎麼傳播的？事件流描述的就是這樣一個接受事件的順序。

IE事件流（事件冒泡）

IE事件流也叫事件冒泡，即事件開始時由最具體的元素（文檔中嵌套層最深的那個節點）接收，然後逐級傳播到較為不具體的節點（文件）。
以上面的程式碼為例，如果你點擊了div元素，那麼這個click事件會如下順序傳播：

1.<div>
2.<body>
3.<html>
4.document

登入後複製

就是說，click事件首先發生在div元素上，而這個元素就是我們點擊的元素，然後click事件沿著DOM樹向上傳播，在每一層節點上都會發生，直到傳播到document物件。

所有的現代瀏覽器都支援事件冒泡，但有些差異。 IE5.5及更早版本中的事件冒泡會跳過html元素，從body直接到document。 IE9、Firefox、Chrome和Safari則將事件一直冒泡到window物件。（舊IE瀏覽器只支援事件冒泡）。

事件捕獲

事件捕獲的想法是不太具體的節點應該更早接收到事件，而具體的節點應該最後接收到事件，正好與事件冒泡相反，再以上面的例子為例，點選div，事件擷取的事件觸發順序如下：

1.document
2.<html>
3.<body>
4.<div>

登入後複製

在事件擷取過程中，document物件先接受到click事件，然後事件沿著DOM樹依序向下，一直傳播到事件的實際目標。

IE9，Firefox、Chrome、Safari和Opera都支援事件擷取。雖然DOM2級事件規範要求事件應該從document物件開始傳播，但這些瀏覽器都是從window物件開始捕捉事件的。

DOM事件流

DOM2級事件規定的事件流包含三個階段：事件擷取階段、處於目標階段、事件冒泡階段。首先發生的是事件捕獲，為截取事件提供機會。然後是實際的目標接受到事件。最後一個階段是冒泡階段，可以在這個階段對事件做出反應。

在DOM事件流中，實際的目標在捕獲階段不會接受到事件。這意味著在捕獲階段，事件從document到html再到body就停止了。下一階段是處於目標階段，於是事件在div上發生，並在事件處理中被看成冒泡階段的一部分。然後，冒泡階段發生，事件傳回ducument。
但實際上，IE9，Firefox、Chrome、Safari和Opera9.5及更高版本都會在捕獲階段觸發事件物件上的事件。結果就是有兩個機會在目標物件上面操作事件。（IE8及更早版本不支援DOM事件流）。

事件處理程序

事件就是使用者或瀏覽器本身執行的某種動作。像是click、load和mousover，都是事件的名字。回應某個事件的函數叫做事件處理程序（事件監聽器）。事件處理程序的名字以"on"開頭，所以click事件的事件處理程序就是onclick，load事件的處理程序就是onload。有以下幾種為事件指定處理程序的方法。

HTML事件處理程序

某個元素支援的每個事件，都可以使用一個與對應事件處理程序同名的HTML屬性來指定。這個屬性的值應該是能夠執行的JavaScript程式碼，範例：

<button id="myButton" onclick="alert(&#39;Clicked&#39;)">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；

登入後複製

在HTML中定義事件處理程序可以包含要執行的特定動作，也可以呼叫在頁面其他地方定義的腳本，範例：

<button id="myButton" onclick="showMsg()">Click Me</button>  //点击按钮就会调用showMsg()函数；<script>
    function showMsg() {
      alert(&#39;Hello world!&#39;)
}</script>

登入後複製

透過HTML指定事件處理程序有兩個缺點：1.時差問題，因為使用者可能會在HTML元素一出現頁面就觸發對應事件，但此時事件處理程序有可能尚未具備執行條件；2.HTML與JavaScript程式碼緊密耦合，如果要更換事件處理程序，就要改變HTML程式碼和JavaScript程式碼。

DOM0級事件處理程序

透過JavaScript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。每一個元素都有自己的事件處理程序屬性，這些屬性通常全部小寫，如onclick。將此屬性的值設為函數，就可以指定事件處理程序，範例：

 var btn = document.getElementById(&#39;myButton&#39;);
  btn.onclick = function() {
    alert("Clicked")
  }

登入後複製

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：

btn.onclick = null;   //删除事件处理程序；
DOM2级事件处理程序

登入後複製

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id)
  }，false)

登入後複製

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：

 var btn = document.getElementById(&#39;myButton&#39;);  //为按钮添加了多个click事件和处理程序；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(this.id);
  }，false);  var btn = document.getElementById(&#39;myButton&#39;);  ；
  btn.addEventListener(&#39;click&#39;,function() {
    alert(&#39;hello world!&#39;);
  }，false);

登入後複製

这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：

//该代码无法运行；btn.removeEventListener(&#39;click&#39;,function() {
  alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById(&#39;myButton&#39;); 
  var function handler() {
    alert(this.id);
  }
btn.addEventListener(&#39;click&#39;,handler,false);
btn.removeEventListener(&#39;click&#39;,handler,false);

登入後複製

本篇对js事件进行了总结，更多相关内容请关注php中文网。

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7844

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

Related knowledge

golang函數動態建立新函數的技巧 Apr 25, 2024 pm 02:39 PM

Go語言提供了兩種動態函數創建技術：closures和反射。 closures允許存取閉包作用域內的變量，而反射可使用FuncOf函數建立新函數。這些技術在自訂HTTP路由器、實現高度可自訂的系統和建置可插拔的元件方面非常有用。

C++ 函數命名中參數順序的考慮 Apr 24, 2024 pm 04:21 PM

在C++函數命名中，考慮參數順序至關重要，可提高可讀性、減少錯誤並促進重構。常見的參數順序約定包括：動作-物件、物件-動作、語意意義和遵循標準函式庫。最佳順序取決於函數目的、參數類型、潛在混淆和語言慣例。

excel函數公式大全 May 07, 2024 pm 12:04 PM

1. SUM函數，用於對一列或一組單元格中的數字進行求和，例如：=SUM(A1:J10)。 2、AVERAGE函數，用於計算一列或一組儲存格中的數字的平均值，例如：=AVERAGE(A1:A10)。 3.COUNT函數，用於計算一列或一組單元格中的數字或文字的數量，例如：=COUNT(A1:A10)4、IF函數，用於根據指定的條件進行邏輯判斷，並返回相應的結果。

如何在Java中寫出高效和可維護的函數？ Apr 24, 2024 am 11:33 AM

編寫高效且可維護的Java函數的關鍵在於：保持簡潔。使用有意義的命名。處理特殊情況。使用適當的可見性。

C++ 函式預設參數與可變參數的優缺點比較 Apr 21, 2024 am 10:21 AM

C++函數中預設參數的優點包括簡化呼叫、增強可讀性、避免錯誤。缺點是限制靈活性、命名限制。可變參數的優點包括無限彈性、動態綁定。缺點包括複雜性更高、隱式型別轉換、除錯困難。

C++ 函式回傳參考型別有什麼好處？ Apr 20, 2024 pm 09:12 PM

C++中的函數傳回參考類型的好處包括：效能提升：引用傳遞避免了物件複製，從而節省了記憶體和時間。直接修改：呼叫方可以直接修改傳回的參考對象，而無需重新賦值。程式碼簡潔：引用傳遞簡化了程式碼，無需額外的賦值操作。

自訂 PHP 函數和預定義函數之間有什麼區別？ Apr 22, 2024 pm 02:21 PM

自訂PHP函數與預定義函數的差異在於：作用域：自訂函數僅限於其定義範圍，而預定義函數可在整個腳本中存取。定義方式：自訂函數使用function關鍵字定義，而預先定義函數則由PHP核心定義。參數傳遞：自訂函數接收參數，而預先定義函數可能不需要參數。擴充性：自訂函數可以根據需要創建，而預定義函數是內建的且無法修改。

C++ 函式異常進階：客製化錯誤處理 May 01, 2024 pm 06:39 PM

C++中的異常處理可透過自訂異常類別增強，提供特定錯誤訊息、上下文資訊以及根據錯誤類型執行自訂操作。定義繼承自std::exception的異常類，提供特定的錯誤訊息。使用throw關鍵字拋出自訂異常。在try-catch區塊中使用dynamic_cast將捕獲到的異常轉換為自訂異常類型。在實戰案例中，open_file函數會拋出FileNotFoundException異常，捕捉並處理該異常可提供更具體的錯誤訊息。

See all articles

對於函數事件的總結

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題