这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战
事件处理
DOM0中如果我们想给元素上添加点击事件，可以使用onclick,通过点击事件可以获取元素上的属性和方法。如果我们想要移除按钮上的点击事件，我们可以设置为null，这样点击的话就不会再次触发了。
let zss = document.getElementById("wrap");
zss.onclick = function() { console.log("wrap"); };
DOM2中我们可以通过addEventListener来给程序进行赋值，也可以通过removeEventListener方法来给程序进行移除。这两个方法都会接收3个参数，分别为事件处理函数，一个Boolean和事件名，当为true时，用来表示捕获阶段调用事件处理程序。如果为false，则用来表示冒泡阶段调用事件处理程序。其中false为默认值。而在IE中我们可以使用attachEvent和detachEvent方法，这两种方法接收的参数是一样的，分别为事件处理函数和事件处理程序的名字。IE中使用attachEvent和DOM0方式中的主要区别是事件处理程序作用域。当我们在使用DOM0方式时，事件处理程序中的this值就是目标元素，比如如果我们在全局作用域中去使用，那么我们的this等于window。
var ts = document.getElementById("test");
// 这里会弹出true
ts.attachEvent("onClick", function() { alert(window === this) })
在DOM中，event对象是传给事件处理程序唯一参数，所以无论我们使用哪种方式指定事件处理程序，都会传入这个event对象。其中preventDefault方法用于阻止特定事件的默认动作。常见的有点击链接进行跳转到指定URL，任何可以通过preventDefault取消默认行为的事件，其事件对象的cancelable属性都会设置为true。而stopPropagation方法用于立即阻止事件流在DOM结构中传播，可以取消后续的事件捕获或冒泡。eventPhase属性可用于确定事件流当前所处的阶段。如果事件处理程序在捕获阶段被调用，那么它的值就为1，如果事件处理程序在目标上被调用，那么它的值就为2，如果事件处理程序在冒泡阶段被调用，那么它的值就为3。实现跨浏览器方案我们可以使用EventUtil，有4种新方法，比如getEvent，它的返回值是event对象的引用。还有getTarget，它的返回值是事件目标。还有preventDefault，它的作用是阻止事件的默认行为,可以设置event.returnValue为false。最后一个是stopPropagation，可以用于检测停止事件流的DOM方法。
let test = document.getElementById("zss");
test.onclick = function(event) {
event.preventDefault();
};
