事件的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,...