JS高階程式設計學習筆記之JS事件(1)

2022-08-31 12:21:13 字數 2247 閱讀 2476

事件流

冒泡定義:事件開始時由最具體的元素接收,然後逐級上傳到較為不具體的節點。(ie9、ff、chrome、safari會將事件一直冒泡到window物件。ie5.5及其以下會跳過元素,直接從body跳到document)。若發生事件的節點元素並沒有繫結該事件,則這個動作會向上冒泡,直到被執行,一直冒泡到window物件。

阻止冒泡:①使用stoppropagation()

②在函式中進行一次判斷,if(event.target==event.current.target)}

捕獲定義:不太具體的節點先接收到事件,而具體的節點之後接收到事件。(老版瀏覽器不支援事件捕獲。ie9、ff、chrome、opera、safari均支援事件捕獲,且從window開始捕獲)

事件流:事件流分為三個階段。即,捕獲階段,處於目標階段,冒泡階段。(dom2級事件規範要求捕獲階段不涉及事件目標,但是ie9、ff、chrome、opera9.5、safari都會在捕獲階段接觸發生在事件物件上的事件,結果即是有兩個機會在目標物件上面操作事件。ie8以及更早版本不支援dom事件流)

事件處理程式:

html事件處理程式:

嵌入到行間中

可以實現具體的動作,如alert等。也可以用來呼叫其他函式。

**在執行時,有權訪問全域性作用域中的所有變數。

可以像訪問區域性變數一樣訪問document以及該元素本身的成員。(p349)若為表單輸入元素,作用域中還會包含表單元素入口,即無需引用表單元素就能訪問其他表單內容。

問題:時差,耦合

dom0級事件處理程式:

將乙個函式賦值給乙個事件處理程式屬性。如btn.onclick = function()。所有瀏覽器均支援此方法。

在函式的作用域中執行。this引用當前元素。

以此方法新增的事件處理程式會在事件流的冒泡階段被處理。

刪除:btn.onclick = null

dom2級事件處理程式:

指定/刪除事件處理程式:addeventlistener()    /    removeeventlistener(),引數為a、要處理的事件名(沒有on)b、作為事件處理程式的函式c、布林值(true:捕獲時呼叫,false冒泡時呼叫)在元素作用域中執行。

可以新增多個事件處理程式。刪除時需引數完全相同,即匿名函式無法刪除。

ie8以下不相容。

ie事件處理程式

attachevent()        /    detachevent(),引數為a、事件處理名稱(有on)b、事件處理函式

該方法將新增事件至冒泡階段。可新增多個事件處理程式。只有ie/opera相容

在全域性作用域中執行,this = window。

事件不以新增順序執行,以相反順序觸發

5、跨瀏覽器的事件處理程式    p353。兩段相容性**見書。

三、事件物件:在觸發dom上的某事件時,會產生乙個事件物件event,這個物件中包含著所有與事件相關的資訊。

1、dom中的事件物件:相容dom的瀏覽器會將乙個event物件傳入到事件處理程式中。(不需要一定將event寫在function的引數裡)。在html事件處理程式中,變數event儲存著event物件。

currentarget,事件處理程式當前正在處理事件的那個元素 =this。即事件註冊到的那個元素。

target,事件的目標。比如,滑鼠點選哪個元素,則target就指向該元素。

type,事件型別

preventdefault(),阻止事件的預設行為。前提需設定cancelable為true。

stopprogation(),停止捕獲和冒泡。

2、ie中的事件物件:

使用attachevent,event作為引數傳入事件處理程式,也可以通過window訪問。(edge不支援attachevent)

在使用dom0方法新增事件處理程式時。event物件作為window物件的乙個屬性存在。var event =window.event。(經測試,在dom0方法中,不將event當做引數傳入,也不將他定義為變數,直接比較event與window.event,二者完全相同。chrome下)。

html事件處理程式,通過乙個名為event的變數訪問event。

注意,因為事件處理程式的作用域是根據指定他的方法決定的,所以不能認為this會始終等於事件目標。使用event.srcelement比較保險,與dom中的target相同。

returnvalue=preventdefault        cancelbubble(只能取消冒泡)=stoppropagation

跨瀏覽器的事件物件p360

事件 《JS高階程式設計》

一 事件流 1.事件流描述的是從頁面中接收事件的順序 2.事件冒泡 event bubble 事件從開始時由最具體的元素 就是巢狀最深的那個節點 開始,逐級向上傳播到較為不具體的節點 就是document 點選這裡 如果點選了div元素,那麼這個click事件會按如下順序傳播 1.2.3.4.doc...

JS高階程式設計學習筆記之RegExp型別

建立正規表示式 字面量形式定義正規表示式 var expression pattern flags pattern部分可以使任意簡單或複雜的正規表示式。每個正規表示式可以帶有乙個或多個標誌。標誌為 g,表示全域性模式。i,表示不區分大小寫。m,表示多行模式 正規表示式的元字元包括 注意 模式中使用的...

JS高階高階之征服非同步程式設計

問大家乙個問題,js為什麼是單執行緒?也許有些人知道,但是我要說的是有趣的事情,創造js的網景公司拒絕別人向瀏覽器裡加入執行緒的提議,原因是如果加入了執行緒,這門語言的推廣就沒有那麼成功了,js之所以這麼流行,某種程度上是因為菜鳥程式設計師也能上手,他們不必擔心死鎖和競爭問題。總結 加入多執行緒,我...