1.事件绑定
// 事件绑定
const node = document.getElementById("btn");
node.addEventListener("click", function () {
console.log("click");
}, false);
//通用事件绑定函数
function addEvent(node, type, handler) {
node.addEventListener(type, handler, false);
}
addEvent(node, "click", function () {
event.preventDefault(); //阻止默认事件
console.log("clicked");
})2.事件冒泡
事件冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；
从具体的元素到不确定的元素。
终止事件冒泡：在相应的函数中加上event.stopPropagation()
事件捕获： 从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。
从不确定的元素到具体的元素。
3.事件代理(事件委托)
就是利用冒泡阶段的运行机制来实现的，就是把一个元素响应事件的函数委托到另一个元素上，一般是把一组元素的事件委托到他的父元素上。
即是指：不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
eg：ul和li标签的事件监听，比如我们在添加事件的时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。事件委托的优点是：
1.减少内存消耗，节约效率
2.适合动态元素的绑定事件，（新添加的元素也会有监听函数，也可以有事件触发机制）
