dom應用（事件）

事件的介紹

1.註冊事件

dom-0級的

onclick

let but =  document.

queryselector
('button');
but.
onclick
=function()
//相同時間 繫結之後   只顯示最後乙個   繫結的事件  也就是說
//之前的會被覆蓋  
but.
onclick
=function()

1級：addeventlistener

but.

addeventlistener
('click'
,function()
);but.
addeventlistener
('click'
,function()
);

//這是乙個封裝的相容函式

function
addeventlistener
(type,eventname,callback)
else
if(type.attachevevt)
else
}addeventlistener
(but,
'click'
,function()
);

let btn = document.

queryselector
('button');
// btn.onclick = function () 
// document.getelementbyid('btn1').onclick = function () ;
function
fun(
)//相對去前一種來說 removeeventlistener 要有擔憂的函式guam和一處 click  時不行的 
btn.
addeventlistener
('click'
,fun)
;         document.
getelementbyid
('btn1').
onclick
=function()
;//刪除事件 封裝
function
removeevent
(type,eventname,callback)
else
if(type.detachevevt)
else
}

我們開發一般要經理

document–html–body–div–body–html–document,著幾個階段，同時，我們稱 document–html–body這之間時 捕獲階段，div 稱之為 當前目標階段，div這個i後的body–html–document, 稱之為 冒泡階段，這個時乙個順序，也叫做事件流在標籤之間的傳播

//驗證順序

這裡的true 表示 捕獲階段
let outer = document.
getelementbyid
('outer');
let inner = document.
getelementbyid
('inner');
inner.
addeventlistener
('click'
,function()
,true);
outer.
addeventlistener
('click'
,function()
,true);
//冒泡了
outer.
addeventlistener
('click'
,function()
);//body
document.body.
addeventlistener
('click'
,function()
);document.body.
addeventlistener
('click'
,function()
,true
);

簡單的說下吧

//事件物件

let box = document.
queryselector
('.box');
box.
onclick
=function
(params)
//事件冒泡阻止
let outer = document.
queryselector
('.outer');
let inner = document.
queryselector
('.inner');
outer.
addeventlistener
('click'
,function()
);inner.
addeventlistener
('click'
,function
(params));
document.
addeventlistener
('click'
,function()
);

事件**的核心就是給父親元素繫結事件，

11111
<
/li>
22222
<
/li>
33333
<
/li>
44444
<
/li>
55555
<
/li>
<
/ul>
新增li<
/button>
//事件委託的核心 給父親繫結事件
let oul = document.
queryselector
('ul');
oul.
onclick
=function
(params)
//老辦法
let lis = document.
queryselectorall
('li');
for(
let i =
0; i < lis.length; i++)}
//let oul = document.queryselector('ul');
let btn = document.
queryselector
('button');
btn.
onclick
=function
(params)
<
/script>

之前介紹過，現在不在介紹了 直接**

我不希望你複製<

/div>
//滑鼠事件物件有很對很多
//給 整個新增事件--沒有右擊事件
//  document.addeventlistener('contextmenu',function (params) );
//不被選中事件
document.
addeventlistener
('selectstart'
,function
(params));
let odiv = document.
queryselector
('div');
odiv.
onclick
=function
(params)
<
/script>
//滑鼠跟隨事件的乙個例子
"./heart.jpeg" width=
"120px"
>
let oimg = document.
queryselector
('img');
//mousemove  滑鼠引動事件觸發 
document.
addeventlistener
('mousemove'
,function
(params));
<
/script>

快應用 事件監聽與觸發

一 快應用 1 快應用是基於手機硬體平台的新型應用形態，標準是由主流手機廠商組成的快應用聯盟聯合制定 2 快應用標準的誕生將在研發介面 能力接入 開發者服務等層面建設標準平台，以平台化的生態模式對個人開發者和企業開發者全品類開放 二 接下來只是整理了我認為重要的內容 加強記憶 具體內容請看官網 1 ...

JS ONCLICK常用事件

1.開啟 name button1 2.另存為 name button2 3.屬性 name button3 4.列印 name button 5.頁面設定 name button4 6.重新整理 name refresh 7.匯入收藏夾 name button5 8.匯出收藏夾 name butt...

JavaScript 常用事件

狀態 事件 說明 滑鼠 鍵盤事件 onclick 滑鼠單擊時觸發此事件 ondblclick 滑鼠雙擊時觸發此事件 onmousedown 按下滑鼠時觸發此事件 onmouseup 滑鼠按下後鬆開滑鼠時觸發此事件 onmouseover 當滑鼠移動到某物件範圍的上方時觸發此事件 onmousemov...