當(dāng)一個(gè)事件發(fā)生的時(shí)候，都會(huì)去創(chuàng)建一個(gè)對(duì)象，我們可以從事件對(duì)象上獲取一些相關(guān)的信息。比如，事件是通過(guò)什么觸發(fā)的，是鼠標(biāo)呀，還是鍵盤呀，事件觸發(fā)的時(shí)候是否有冒泡、是否有阻止等很多的相關(guān)信息。
在js編程中有一句話，一切介對(duì)象，所以事件也是對(duì)象。比如，當(dāng)我們點(diǎn)擊一個(gè)函數(shù)的時(shí)候，會(huì)觸發(fā)一個(gè)函數(shù)，這個(gè)函數(shù)就開(kāi)始執(zhí)行了。這個(gè)函數(shù)就是方法，而方法就是對(duì)象。
EventTarget對(duì)象 定義了事件監(jiān)聽(tīng)與觸發(fā)方法的對(duì)象
我們?cè)谇懊嬷v過(guò)，一個(gè)節(jié)點(diǎn)有繼承的關(guān)系，沒(méi)個(gè)節(jié)點(diǎn)都會(huì)有一個(gè)頭，而EventTarget就是這個(gè)繼承的頭。
1、所有節(jié)點(diǎn)都繼承這個(gè)對(duì)象；
2、這個(gè)對(duì)象上有三個(gè)方法；
??2.1、addEventListener 綁定事件的監(jiān)聽(tīng)函數(shù)
???參數(shù)2可以是一個(gè)對(duì)象（必需具有handleEvent方法）
???參數(shù)3可以是一個(gè)對(duì)象
????capture false代表冒泡階段觸發(fā)，true代表捕獲階段觸發(fā)
????once false代表事件可以觸發(fā)多次，true代表事件只能觸發(fā)一次
????passive false代表事件里可以使用preventDefault方法，true代表事件里不可以使用preventDefault方法（會(huì)報(bào)錯(cuò)）
<div>1</div>
<div>2</div>
<div>3</div>
<script>
console.dir(EventTarget);
console.dir(Event);
const divs=document.querySelectorAll("div");
divs[0].addEventListener('click',{
handleEvent(ev){
console.log(ev);
ev.preventDefault();
}
},{capture:false,once:true,passive:false});
divs[1].addEventListener('click',function(){
console.log(this);
});
divs[1].addEventListener('click',function(){
console.log(this);
});
const obj={
age:18,
handleEvent(ev){
console.log(this); //這里的this會(huì)指向obj對(duì)象本身
console.log(this.age); //這里的this會(huì)指向obj對(duì)象本身
}
};
divs[1].addEventListener('click',obj);
//移除事件處理函數(shù)
obj.handleEvent=()=>{
console.log('事件函數(shù)已經(jīng)被修改');
}
const events={
handleEvent(ev){
switch(ev.type){
case 'click':
this.click(ev);
break;
case 'mousemove':
this.mousemove(ev);
break;
case 'mouseout':
this.mouseout(ev);
break;
}
},
click(ev){
console.log('鼠標(biāo)被點(diǎn)擊了');
},
mousemove(ev){
console.log('鼠標(biāo)移動(dòng)了');
},
mouseout(ev){
console.log('鼠標(biāo)離開(kāi)了');
}
};
divs[2].addEventListener('click',events);
divs[2].addEventListener('mousemove',events);
divs[2].addEventListener('mouseout',events);
</script>
從上面的代碼我們可以看出，以后我們只需要操作 obj.handleEvent就可以了
??2.2、removeEventListener 移除事件的監(jiān)聽(tīng)函數(shù)
??2.3、dispatchEvent 觸發(fā)事件
事件發(fā)生以后，會(huì)生成一個(gè)事件對(duì)象Event
Event 事件對(duì)象（事件的構(gòu)造函數(shù)）
1、它里面存儲(chǔ)了事件發(fā)生時(shí)的各種信息；
2、標(biāo)準(zhǔn)瀏覽器的事件對(duì)象為事件監(jiān)聽(tīng)函數(shù)的第一個(gè)參數(shù)；
3、它包含很多子類MouseEvent、KeyboardEvent、InputEvent、FocusEvent、WheelEvent、UIEvent；
屬性
1、bubbles 表示當(dāng)前事件是否會(huì)冒泡，返回布爾值
2、cancelBubble 與上一個(gè)一樣，但是它可以設(shè)置，已從web標(biāo)準(zhǔn)里移除了用stopPropagation()方法來(lái)代替
3、cancelable 表示這個(gè)事件的默認(rèn)動(dòng)作是否可以取消，返回布爾值。如果為true的話可以調(diào)用它對(duì)應(yīng)的preventDefault()方法，為false的話不可以（IE不支持）
4、currentTarget 返回綁定事件的節(jié)點(diǎn)
5、target 返回觸發(fā)事件的節(jié)點(diǎn)（點(diǎn)擊的是哪個(gè)節(jié)點(diǎn)這個(gè)值就指向這個(gè)節(jié)點(diǎn)）（IE678里這個(gè)屬性名為srcElement）
6、defaultPrevented 表示事件是否已經(jīng)阻止默認(rèn)行為（調(diào)用過(guò)preventDefault方法），返回布爾值
7、eventPhase 表示事件目前所處的階段，返回?cái)?shù)字
0 事件目前沒(méi)有發(fā)生
1 事件目前處于捕獲階段
2 事件到達(dá)目標(biāo)節(jié)點(diǎn)
3 事件處于冒泡階段
8、type 表示事件類型，返回一個(gè)字符串
9、isTrusted 表示該事件是否為真實(shí)用戶觸發(fā)，返回布爾值（用模擬事件觸發(fā)返回false）
方法
1、preventDefault 取消瀏覽器對(duì)當(dāng)前事件的默認(rèn)行為；
2、stopImmediatePropagation 阻止同一個(gè)事件的其他監(jiān)聽(tīng)函數(shù)被調(diào)用；
3、stopPropagation 阻止事件在DOM中繼續(xù)傳遞；
