好家伙，本篇为《JS高级程序设计》第十七章"事件"学习笔记

1.DOM0事件处理程序

在 JavaScript 中指定事件处理程序的传统方式是把一个函数赋值给（DOM 元素的）一个事件处理程序属性。

添加点击事件:

<正文>
    <div id = " div_1 " >
    </div>
    <脚本> 
        let button_1 = document.createElement( " button " )
        按钮_1。id = " button_1 " 
        let div_1 = document.getElementById( " div_1 " )
        div_1.appendChild(button_1)
        button_1.onclick =函数() {
            console.log( this.id )
        }
    </脚本>
</body>

移除事件

button_1.onclick = null;

2.DOM2事件处理程序

DOM2 Events 为事件处理程序的赋值方法：addEventListener()

这个方法暴露在所有 DOM 节点上，它们接收 3 个参数：

(1)事件名、

(2)事件处理函数

(3)一个布尔值:true 表示在捕获阶段调用事件处理程序，

　　　　　　 false（默认值）表示在冒泡阶段调用事件处理程序

添加事件:

button_1.addEventListener("click", () => {
    console.log("成功添加");
}, false);

button_1.addEventListener("click", () => {
    console.log(this.id);
}, false);

使用DOM2的优势:

支持添加多个事件处理程序：DOM2事件模型可以为同一元素的同一事件添加多个事件处理程序，不会覆盖原有的事件处理程序，而DOM0事件模型只支持为同一元素的同一事件添加一个事件处理程序。
支持事件捕获和事件冒泡：DOM2事件模型支持事件的捕获和冒泡阶段，可以更精细地控制事件的传递和处理顺序，而DOM0事件模型只支持事件冒泡。
支持更多的事件类型：DOM2事件模型支持更多的事件类型，包括鼠标滚轮事件、键盘按键事件、文本输入事件等，而DOM0事件模型只支持少数的事件类型。
支持事件对象的属性和方法：DOM2事件模型的事件对象具有更多的属性和方法，可以更方便地获取事件的相关信息，而DOM0事件模型的事件对象比较简单，只有少数的属性和方法。

总之，DOM2事件模型相对于DOM0事件模型更加灵活、功能更加强大，可以满足更多的需求，是现代Web开发中不可或缺的一部分。

移除事件处理程序

button_1.addEventListener("click", () => {
    console.log(this.id);
}, false);

button_1.removeEventListener("click", () => {
    console.log(this.id);
}, false);

注意,此处事件移除无效,匿名函数是无法取消的

let afterclick = function(){
    console.log(this.id)
} 

button_1.addEventListener("click", afterclick(), false);

button_1.removeEventListener("click", afterclick(), false);