快捷導(dǎo)航

一起深入理解js中的事件對(duì)象

更新時(shí)間：2021年02月06日 15:17:16 作者：皮卡丘和羊?qū)氊?#128516;

這篇文章主要給大家介紹了關(guān)于js中事件對(duì)象的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我們知道在JS中常用的事件有：

頁(yè)面事件：load；
焦點(diǎn)事件：focus，blur；
鼠標(biāo)事件：click，mouseout，mouseover，mousemove等；
鍵盤(pán)事件：keydown，keyup，keypress；
form表單事件：reset，submit；
內(nèi)容變化事件：change，input

那JS中“事件對(duì)象”，到底是個(gè)什么東西？

首先，什么是事件呢？

首先說(shuō)JS就是為了實(shí)現(xiàn)一些動(dòng)態(tài)的操作，而用戶(hù)會(huì)有時(shí)候想去實(shí)現(xiàn)一些功能，如提交表單，鼠標(biāo)點(diǎn)擊等，就要在瀏覽器中觸發(fā)這個(gè)事件，然后瀏覽器會(huì)感知（或者說(shuō)捕獲）到用戶(hù)的這個(gè)行為，就會(huì)去響應(yīng)處理這個(gè)事件。這個(gè)就稱(chēng)之為事件。

那么說(shuō)，產(chǎn)生事件對(duì)象的原因是什么？

事件的觸發(fā)，大部分情況下是用戶(hù)想去操作的一種行為，也就是說(shuō)，我們并不能確定用戶(hù)什么時(shí)間觸發(fā)；而且，由于事件的傳播機(jī)制，我們甚至不能確定事件具體觸發(fā)在哪個(gè)節(jié)點(diǎn)；這是一件令人很頭疼的事情；

為了解決這個(gè)問(wèn)題，在事件發(fā)生以后，系統(tǒng)會(huì)調(diào)用我們寫(xiě)好的事件處理程序（一段代碼）來(lái)解決。

由此，引出了什么是事件對(duì)象？

系統(tǒng)會(huì)在調(diào)用處理程序時(shí)，把有關(guān)事件發(fā)生的一切信息，封裝成一個(gè)對(duì)象，作為參數(shù)，傳送給監(jiān)聽(tīng)函數(shù)（事件處理程序）。那么說(shuō)這個(gè)對(duì)象，稱(chēng)之為事件對(duì)象。

根據(jù)事件類(lèi)型的不同，事件對(duì)象中包含的信息也有所不同；如點(diǎn)擊事件中，包含鼠標(biāo)點(diǎn)擊的橫縱坐標(biāo)位置，鍵盤(pán)事件中，包含鍵盤(pán)的鍵值等；

<body>
 <div id="div">
 <p>pppp</p>
 </div>
 <input type="text" value="" id="i">
</body>
<script>
var d = document.getElementById('div');
//鼠標(biāo)事件
d.addEventListener('click',function(e){
 console.log(e);
});
var i = document.getElementById('i');
//鍵盤(pán)事件
i.addEventListener('keydown',k);
function k(e){
 console.log(e);
}
</script>

現(xiàn)在了解了事件對(duì)象的含義后，我們來(lái)看看事件對(duì)象中都有哪些屬性和方法？

（1）普通屬性:

event.bubbles: 返回一個(gè)布爾值，表示當(dāng)前事件是否會(huì)冒泡;

event.eventPhase：返回一個(gè)整數(shù)值，表示事件流在傳播階段的位置

0:事件目前沒(méi)有發(fā)生。
1:事件目前處于捕獲階段。
2:事件到達(dá)目標(biāo)節(jié)點(diǎn)。
3:事件處于冒泡階段。

event.type: 返回一個(gè)字符串，表示事件類(lèi)型，大小寫(xiě)敏感;

event.timeStamp: 返回一個(gè)毫秒時(shí)間戳，表示事件發(fā)生的時(shí)間;

clientX、clientY : 獲取鼠標(biāo)事件觸發(fā)的X,Y坐標(biāo)

事件對(duì)象

（2）事件代理/委托屬性:

event.target：對(duì)事件觸發(fā)的引用，返回觸發(fā)事件發(fā)生的那個(gè)節(jié)點(diǎn)。（重點(diǎn)）

event.currentTarget：返回事件當(dāng)前所在的節(jié)點(diǎn)，即正在執(zhí)行的監(jiān)聽(tīng)函數(shù)所綁定的那個(gè)節(jié)點(diǎn)。（了解即可）

 var d = document.getElementById('d');
 d.onclick = function(e){
 //返回事件節(jié)點(diǎn)
 console.log(e.currentTarget);
 //返回觸發(fā)節(jié)點(diǎn)
 console.log(e.target);
 }

事件代理（事件委托）的含義：由于事件會(huì)在冒泡階段向上傳播到父節(jié)點(diǎn)，因此可以把子節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)定義在父節(jié)點(diǎn)上，由父節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)統(tǒng)一處理多個(gè)子元素的事件。這個(gè)方法叫做事件的代理也叫事件代理或者事件委托。

<head>
 <title></title>
 <meta charset="UTF-8">
 <style>
 div{padding: 40px}
 #div3{width: 300px;height: 300px;border: 1px solid red;}
 #div2{width: 200px;height: 200px;border: 1px solid red;}
 #div1{width: 100px;height: 100px;border: 1px solid red}
 </style>
</head>
<body>
 <div id="div3">div3
 <div id="div2">div2
  <div id="div1">div1</div>
 </div>
 </div>
</body>
<script>
 var d = document.getElementById('div3');
 d.onclick = function(e){
 e.target.style.background = 'red';
 }
</script>

根據(jù)上面的代碼可以得到三個(gè)div的位置大概如下：點(diǎn)擊每個(gè)div，每個(gè)div的整體就會(huì)變成紅色。主要是通過(guò)e.target返回了點(diǎn)擊觸發(fā)的該節(jié)點(diǎn)。

（3）阻止瀏覽器默認(rèn)行為和阻止事件傳播的方法event.preventDefault()：該方法阻止瀏覽器會(huì)執(zhí)行當(dāng)前事件的默認(rèn)行為，比如點(diǎn)擊鏈接后，瀏覽器跳轉(zhuǎn)到指定頁(yè)面；或者按一下空格鍵，頁(yè)面向下滾動(dòng)一段距離。event.stopPropagation()：該方法阻止事件在DOM結(jié)構(gòu)中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點(diǎn)上的監(jiān)聽(tīng)函數(shù)。

<body>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="百度2下">我的皎月聞越想聞</a>
 </div>
 </div>
</body>
<script>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = function(e){
 alert('d2');
 }
 d1.onclick = function(e){
 alert('d1');
 }
 a.onclick = function(e){
 //阻止事件傳播
 e.stopPropagation();
 alert('a');
 //阻止瀏覽器默認(rèn)行為
 e.preventDefault();
 }
</script>

使用事件對(duì)象，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的小案例：跟著鼠標(biāo)飛的div（通過(guò)修改事件對(duì)象的XY值）

<body>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="百度2下">我的皎月聞越想聞</a>
 </div>
 </div>
</body>
<script>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = function(e){
 alert('d2');
 }
 d1.onclick = function(e){
 alert('d1');
 }
 a.onclick = function(e){
 //阻止事件傳播
 e.stopPropagation();
 alert('a');
 //阻止瀏覽器默認(rèn)行為
 e.preventDefault();
 }
</script>