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()的区别在哪儿呢？
后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生