事件

事件冒泡流程

• 基于DOM树形结构
• 事件会顺着触发元素往上冒泡
• 应用场景：代理

手写通用事件绑定函数

function bindEvent(elem, type, selector, fn){
	if(fn == null){
		fn = selector;
		selector = null;
	}
	elem.addEventListener(type, event => {
		const target = event.target; // 获取触发的元素
		// 代理绑定
		if(selector){
			if(target.matches(selector)){
				fn.call(target,event);
			}
		} 
		// 普通绑定
		else {
			fn.call(target,event);
		}
	})
}

// 普通绑定
const btn1 = document.getElementById('btn1');
bindEvent(btn1, 'click', function(event){
	event.preventDefault(); // 阻止默认行为
	alert(this.innerHTML);
})

// 代理绑定
const div3 = document.getElementById('div3');
bindEvent(div3, 'click', 'a', function(event){
	event.preventDefault(); // 阻止默认行为
	alert(this.innerHTML);
})