js中的事件詳解

2021-10-08 07:12:29 字數 2054 閱讀 5079

事件的3個階段:事件捕獲、目標階段、事件冒泡

事件冒泡和事件捕獲

事件捕獲:從document開始觸發,一級一級往下傳遞,依次觸發,直到真正事件目標為止

事件冒泡:從當前觸發的事件目標一級一級往上傳遞,依次觸發,直到document為止

事件**(事件委託):

利用事件冒泡,只用乙個事件處理程式,就可以管理某一型別的所有事件

事件繫結:

(1)內聯 html 屬性法

"alert('ouch!')"

>click<

/div>

(2)元素屬性法

"my-div"

>click<

/div>

var myelement = document.

getelementbyid

('my-div');

myelement.

onclick

=function()

<

/script>

(3)dom的事件監聽

"my-div"

>click<

/div>

var mypara = document.

getelementbyid

('my-div');

mypara.

addeventlistener

('click'

,function()

,false);

// false 代表是事件冒泡階段,true是事件捕獲階段

事件迴圈

巨集任務:script(整體**), settimeout, setinterval, setimmediate, i/o, ui rendering

微任務:rocess.nexttick, promises, object.observe, mutationobserver。

執行機制

1.執行乙個巨集任務(棧中沒有就從事件佇列中獲取)

2.執行過程中如果遇到微任務,就將它新增到微任務的任務佇列中

3.巨集任務執行完畢後,立即執行當前微任務佇列中的所有微任務(依次執行)

4.當前巨集任務執行完畢,開始檢查渲染,然後gui執行緒接管渲染

5.渲染完畢後,js執行緒繼續接管,開始下乙個巨集任務(從事件佇列中獲取)

巨集任務-> 所有微任務->巨集任務

//請寫出輸出內容

async

function

async1()

,0)await

async2()

;settimeout

(function()

,0) console.

log(

'async1 end');

}async

function

async2()

console.

log(

'script start');

settimeout

(function()

,0)async1()

;new

promise

(function

(resolve)).

then

(function()

);console.

log(

'script end');

script start

async1 start

async2

promise1

script end

async1 end

promise2

settimeout

settimeout2

js中滑鼠滾輪事件詳解

附加事件 其中經我測試,ie opera屬於同一型別,使用attachevent即可新增滾輪事件。ie註冊事件 if document.attachevent firefox使用addeventlistener新增滾輪事件 firefox註冊事件 if document.addeventlisten...

JS事件型別詳解

一般事件 onclick ie3 n2 滑鼠點選時觸發 此事件 ondblclick ie4 n4 滑鼠雙擊時觸發 此事件 onmousedown ie4 n4 按下滑鼠時觸發 此事件 onmouseup ie4 n4 滑鼠按下後鬆開滑鼠時觸發 此事件 onmouseover ie3 n2 當滑鼠移...

js事件委託詳解

首先說一下事件冒泡和事件捕獲機制,事件冒泡是有微軟公司提出來的,事件捕獲是有網景公司提出來的,當時兩家是爭論的不可開交,後來w3c也沒辦法,就採取了折中的方式,事件產生後先捕獲後冒泡,通常,在js中監聽事件的方法共有三種,分別是 ele.addeventlistener type,listener,...