事件物件

包含事件相關的資訊,如滑鼠、時間、觸發的DOM物件等

js預設將事件物件封裝好,並自動的以引數的形式,傳遞給事件處理函式的第1個引數,如下:

document.getElementsByTagName("div")[0].onclick = function(e){
  e = window.event || e; //相容IE低版本(事件物件繫結在window的event上)
  console.log(e);//這裡e就是事件物件
}

事件的屬性和方法

type:獲取事件型別(click、mouseover等等)

target:獲取發生的所在元素(在低版本IE下用srcElement屬性)

stopPropagation() 阻止事件冒泡(IE用cancelBubble屬性為false阻止冒泡)

preventDefault() 阻止事件預設行為(IE用returnValue屬性為false阻止預設行為)

事件委託

利用target屬性,獲取時間發生的所在物件,避免全體子元素加事件,對比如下:

var tbs=document.getElementsByTagName("td");
for(var i=0;i<tbs.length;i++){//迴圈給每個子元素新增事件
tbs[i].onclick=function(){
this.style.background="red";
}
}
document.getElementsByTagName("table")[0].onclick=function(e){
e.target.style.background="red";//只繫結父元素事件,用target獲取子元素
}