原生JS事件繫結onclick和addEventListener
阿新 • • 發佈:2019-02-09
onclick繫結方式
優點:
- 簡潔
- 處理事件的this關鍵字指向當前元素
缺點:
- 不能對事件捕獲或事件冒泡進行控制,只能使用事件冒泡,無法切換成事件捕獲
- 一次只能對一個元素繫結一個事件處理程式,當使用window.onload屬性時,會覆蓋採用相同方法所繫結的事件程式碼
this與event查一不大 推薦使用event物件 這樣你總是可以擁有全部的可用資訊
dd.onclick = function(event){
console.log(event.target.innerHTML);//event.target指向的是dd元素,以及他的所有資訊
console.log(this.innerHTML);//this也是指向dd元素,包含他的可用資訊
}
注意:有時也會有需要使用this的情況
當需要滑鼠移入和移出的時候 event會觸發該事件每一個子元素
dd.onmouseover = function(event) {
this.style.backgroundColor = "red";//不會改變子元素
event.target.style.backgroundColor = 'red';//會改變子元素
};
dd.onmouseout = function(event) {
this .style.backgroundColor = "green"
event.target.style.backgroundColor="green"
};
addEventListener繫結方式
優點:
- 可以支援事件處理的捕獲階段,也可以支援時間處理的冒泡階段,兩個階段都是通過addEventListener最後一個引數設定為false(預設值,表示事件冒泡)或者true(表示事件捕獲)來切換
- 事件處理 this與onclick一樣
- 事件處理函式中,event物件總是作為第一個可用引數
- 你可以為某個元素繫結多個事件而不會覆蓋之前繫結的處理程式 (按照順序執行)
缺點:
- IE8以下不支援
dd.addEventListener('click',function(e){
console.log(this.innerHTML);
console.log( e.target.innerHTML );
});
解除事件繫結
對於onclick
dd.onclick = null;
對於addEventListener
function clickShow(){
console.log( 'clickShow' );
}
function removeShow(){
console.log( 'removeShow' );
dd.removeEventListener('click',clickShow,false/true);
}
dd.addEventListener('click',clickShow,flase/true);//當第三個引數flase/true存在的時候 那麼移除的時候也應該帶有第三個引數,如果沒有可以不帶
cc.addEventListener('click',removeShow)
阻止事件冒泡e.stopPropagation();
dd.onclick = function(e){
console.log(e.target.innerHTML);
this.style.color = 'red';
//阻止事件冒泡
//防止點選dd的時候隱藏了父級domClick
e.stopPropagation();
}
domClick.addEventListener('click',function(e){
this.style.visibility = 'hidden';
})
遮蔽瀏覽去的預設行為 e.preventDefult();return false;
參考書籍:《精通javascript》(第二版)第六章