事件售担,就是文檔或瀏覽器窗口發(fā)生的一些特定交互的瞬間肉康。
這次先來說說事件對象。在觸發(fā)DOM上的某個事件時灼舍,會產(chǎn)生一個事件對象event,這個對象中包含著所有與事件有關(guān)的信息。
所有的瀏覽器都支持event對象涨薪,但是支持的方式不同骑素。那事件對象怎么得到呢:
var oBtn = document.querySelector('myBtn');
oBtn.onclick = function(event){
console.log(event);
}
oBtn.addEventListener("click",function(event){
console.log(event);
},false)
很簡單是吧,在觸發(fā)特定事件的時候刚夺,這個變量event保存的就是event對象
<input type="button" onclick="alert(event)"/>
這樣使用也是一樣的献丑,可以獲取到event對象。
不同的觸發(fā)事件會有不同的屬性和方法,當(dāng)然侠姑,所有的事件都會有一些相同的屬性和方法创橄,這里就不一一列舉了,有興趣的同學(xué)可以看看高級程序設(shè)計這本書的事件這一章莽红。
這里列舉幾個常用的妥畏,currentTarget與target,這兩個屬性看上去挺相似的,書上對這兩個屬性的解釋是
currentTarget(其事件處理程序當(dāng)前正在處理事件的那個元素)安吁,target(事件的目標(biāo))醉蚁。通過自己寫的demo,我對這兩個屬性的理解是,currentTarget(你綁定事件的那個元素), target(觸發(fā)事件的那個目標(biāo))
<div class="box">
<input type="button" value="點我">
</div>
//js部分
var oBox = document.querySelector('.box');
var oBtn = document.querySelector('input');
oBtn.onclick=function(event){
console.log(this); //button
console.log(event.target); //button
console.log(event.currentTarget); //button
}
oBox.onclick=function(event){
console.log(this); //div
console.log(event.target); //button
console.log(event.currentTarget); //div
}
通過demo可以看出 this始終等于currentTarget,也就是注冊事件處理程序的元素鬼店,target就是觸發(fā)事件的實際目標(biāo)网棍。
點擊button的時候由于事件處理程序注冊于button之上,所以處理事件的目標(biāo)也是button妇智。
如果只是在div上注冊點擊事件處理程序滥玷,雖然事件是由button出發(fā)的,但是它本身并沒有注冊這個事件處理程序巍棱,所以會向上冒泡惑畴,找到div元素。
千萬不要把currentTarget與target搞混了航徙。
以上摘自javascript高級程序一書桨菜,歡迎小伙伴們一起討論,做為一只前端菜鳥,還在學(xué)習(xí)中倒得。