js面試,事件相關問題

這一節比較簡單了，也沒啥說的
一、事件綁定
1.1 通用事件綁定
el.addEventListener(event,callback)
el.preventDefault( ); 阻止通過 addEventListener( ) 添加的事件的默認事件
1.2 ie事件綁定
el.attachEvent(el,callback)
el.returnValue = false; 阻止通過 attachEvent( ) 添加的事件的默認事件

接下來寫一個類似於jq的世界綁定吧，未做ie兼容，懶得寫了，也不是什麼難事

let a = window.a=window.$=function (el){
	if(this instanceof a){
		this.el = document.querySelector(el)
	}else{
		return new a(el)
	}
}
a.prototype.on=function(evnettype,callback){
	this.el.addEventListener(evnettype,callback)
}
//使用
$('.parent').on('click',()=>{
	alert('sss')
})

二、事件冒泡
事件冒泡，就這麼理解吧，觸發了子事件接着就觸發了父事件
其中阻止事件冒泡是：

• w3c的方法是e.stopPropagation()
• e.cancelBubble = true

通過代碼理解事件冒泡：
html代碼
<ul id=“ulbox”>
<li>我是1</li>
<li>我是2</li>
<li id=“child-li”>我是3</li>
</ul>

let a = window.a=window.$=function (el){
	if(this instanceof a){
		this.el = document.querySelector(el)
	}else{
		return new a(el)
	}
}
a.prototype.on=function(evnettype,callback){
	this.el.addEventListener(evnettype,callback)
}
$("#ulbox").on('click',(e)=>{
	console.log('parent-ul')
})
$("#child-li").on('click',(e)=>{
	console.log('child-li')
	//e.stopPropagation();阻止冒泡
})

事件代理
事件代理其實就是事件冒泡的運用，本來給兒子做的事情交給父親做。用target來確定

//承接上面代碼
$("#ulbox").on('click',(e)=>{
	let el = e.target||event.target
	console.log(el.textContent)
})

三、事件捕獲
事件捕獲就是觸發父級事件從而觸發子級事件

• DOM3級新增事件stopImmediatePropagation()方法來阻止事件捕獲
• stopPropagation()也可以阻止事件捕獲。

stopImmediatePropagation() 和 stopPropagation()的區別在哪兒呢？
後者只會阻止冒泡或者是捕獲。 但是前者除此之外還會阻止該元素的其他事件發生，但是後者就不會阻止其他事件的發生