javascript事件

yuanxin 發布于2019-08-26 13:38 / 2033人閱讀

摘要：事件的本質是程序各組成之間的一種通訊方式，也是異步編程的一種實現。事件如的名稱，大小寫敏感。事件發生時，就會執行此函數。該對象有下列屬性布爾值，表示該事件是否在捕獲階段觸發監聽函數。該方法主要用于移除添加的事件監聽函數。

事件的本質是程序各組成之間的一種通訊方式，也是異步編程的一種實現。
----摘自JavaScript標準參考教程

1.EventTarget接口

EventTarget是接收事件監聽跟出發的接口。所有的節點對象都會有這個接口。
該接口提供三個實例方法。

 addEventListener:綁定監聽事件
 removeEventListener:移除監聽事件
 dispatchEvent：觸發事件

1.1 EventTarget.addEventListener()

   EventTarget.addEventListener()用于實現為節點或者對象綁定一個監聽事件，一個對象或者節點可以綁定多個監聽事件，但若每個監聽事件的監聽函數是同一個的話就只會執行一次，其他函數會自動被移除。

該方法接受三個參數。

target.addEventListener(type,listener[,userCapture]);

type:事件(如：click,focus)的名稱，大小寫敏感。
listener:監聽函數（函數名）。事件發生時，就會執行此函數。
useCapture:布爾指，表示監聽函數是否在捕獲階段觸發，默認值：false（函數只在冒泡時觸發）

example 1：

oDiv=document.querySelector(".div1"); 
function eventFun(){ 
   console.log("監聽事件") 
} 
oDiv.addEventListener("click",eventFun,false);

關于參數還有另外兩個情況
1.第二個參數除了監聽函數，還可以是具有handleEvent方法的對象
example 2:

oDiv.addEventListener("click",
   {   handleEvent:function(){
   console.log("handleEvent方法"); 
   } 
  });

2.第三個參數除了布爾值useCapture，還可以是一個屬性配置對象。該對象有下列屬性

capture：布爾值，表示該事件是否在捕獲階段觸發監聽函數。

once：布爾值，表示監聽函數只觸發一次，然后自動移除。

passive：布爾值，表示監聽函數不會調用事件的preventDefault方法。如果監聽函數調用了，瀏覽器會自動忽略這個要求，并在控制臺輸出一行警告。

1.2 EventTarget.removeEventListener()
該方法主要用于移除addEventListener添加的事件監聽函數。該方法沒有返回值。用法與addEventListener()方法完全一值。

1.3 EventTarget.dispatchEvent()
EventTarget.dispatchEvent()方法在當前節點上出發指定事件，從而觸發監聽函數的執行。該方法返回一個布爾值，只要一個監聽函數調用了Event.preventDefault()，則返回false，否則返回true。

 EventTarget.dispatchEvent(event)

example 3:

oDiv.addEventListener("click",eventFun,false);
 var event = new Event("click);
 oDiv.dispatchEvent(event);//自動執行click事件。

2.監聽函數

瀏覽器的事件模型就是通過監聽函數來對事件作出反應的，瀏覽器監聽到這個事件就會執行對應的監聽函數。
javascript中有三種方法可以為事件綁定監聽函數

2.1 html的on-屬性(事件名)

 
 //這樣綁定的是函數名+(),這樣當事件發生時就會立即執行函數

2.2元素節點的事件屬性

div.onclick=function(){
  console.log("節點事件")
}

2.3 EventTarget.addEventListener()
使用方法同第一小節

2.4 總結
第一種方法違反了html與javascriot代碼分離的原則，不利于代碼分工，不推薦使用。
第二種方法，同一個事件只能定義一個監聽函數。如果定義多次，后一次會把前面的覆蓋掉。不推薦使用。
第三種是比較推薦且官方指定的監聽函數方法，原因如下：

1.同一個事件可以添加多個監聽函數。
2.能夠指定在哪個階段觸發監聽函數。
3.除了DOM節點，其他對象(比如：window,XMLHttpRequest等)也有這個接口，它等于是整個javascript統一的監聽函數接口。

云服務器 GPU云服務器 javascript事件 javascript鍵盤事件 javascript焦點事件 javascript事件綁定

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

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

瀏覽器下的 Event Loop

摘要：前言是以單線程的形式運行在宿主環境下，采用了回調的形式來解決異步任務。線程中步就是在瀏覽器下的。前言 javascript 是以單線程的形式運行在宿主環境下，javascript 采用了回調的形式來解決異步任務。為什么是單線程？ javascript 的最開始的出現是為了給 web 頁面增添一些動態的效果，那么就避免不了獲取頁面上的元素信息，如果 javascript 是以多線程的...

forrest23 2019-08-23 16:50 評論0 收藏0
什么是JavaScript 事件循環 ?

摘要：此事件隊列的美妙之處在于它只是函數等待被調用和移動到調用棧的一個臨時存放區域。在事件循環不斷監視調用棧是否為空現在確實是空的時候調用創建一個新的調用棧來執行代碼。在執行完之后進入了一個新的狀態這個狀態調用棧為空事件記錄表為空事件隊列也為空。這篇文章是對個人認為講解　JavaScript　事件循環比較清楚的一篇英文文章的簡單翻譯,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 評論0 收藏0
JavaScript 瀏覽器事件解析

摘要：原文瀏覽器事件之間的關系程序采用了異步事件驅動編程模型，維基百科對它的解釋是事件驅動程序設計英語是一種電腦程序設計模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、瀏覽器、事件之間的關系 JavaScript 程序采用了異步事件驅動編程（Event-driven program...

spacewander 2019-08-20 11:26 評論0 收藏0
《JavaScript高級程序設計》學習筆記：JavaScript中的事件流和事件處理程序

摘要：可以使用偵聽器或處理程序來預訂事件，以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器（或處理程序來預訂事件），以便事件發生時執行相應的代碼。 1. 事件流事件流：從頁面中接收事件的順序。 ...

Rocko 2019-08-19 17:21 評論0 收藏0
【譯】JavaScript面試問題：事件委托和this

摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監聽器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 評論0 收藏0
初窺JavaScript事件機制的實現（一）—— Node.js事件驅動實現概覽

摘要：如果當前沒有事件也沒有定時器事件，則返回。相關資料關于的架構及設計思路的事件討論了使用線程池異步運行代碼。下一篇初窺事件機制的實現二中定時器的實現在瀏覽器中，事件作為一個極為重要的機制，給予JavaScript響應用戶操作與DOM變化的能力；在Node.js中，事件驅動模型則是其高并發能力的基礎。學習JavaScript也需要了解它的運行平臺，為了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 評論0 收藏0