#1、事件 ##1.1事件三要素 - 事件源：触发事件的元素 - 事件类型：行为，鼠标点击、悬停等 - 事件处理函数：事件发生时要进行的操作 ##1.2添加/绑定事件 ###1.2.1html事件监听器 在html相对应的元素的开始标签中调用函数 写法：事件类型 = "事件处理函数调用" 在js中声明事件处理函数 ```js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { 100px; height: 100px; background-color: orange; } </style> </head> <body> <div onclick = "fn()"></div> <script> function fn(){ console.log("hello") } </script> </body> ``` ###1.2.2DOM0级事件监听 写到JS中 写法：事件源.事件类型 = 事件处理函数（多个函数会覆盖） 在事件处理函数中，要修改属性值，如果该属性为两个单词，则用驼峰法合并写这个属性； 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { 100px; height: 100px; background-color: orange; } </style> </head> <body> <div></div> <script> let div = querySelector("div"); div.onclick = function(){ div.style.backgroundColor = "red"; } </script> </body> ###1.2.3DOM2级事件监听器 写到JS中 写法：事件源.addEventListener("事件类型",事件函数名,布尔值) 多个事件函数不会覆盖 上例中JS中可以写 let div = querySelector("div"); div.addEventListener("click",fn,false)； function fn (){ console.log("world") } 布尔值为true,为捕获类型，为false，事件就是冒泡类型 ##1.3删除事件 ###1.3.1删除DOM0级事件 写法：事件源.事件类型 = null; div.onclick = null; ###1.3.2删除DOM2级事件 写法：事件源.removeEventListener("事件类型",事件函数名，布尔值） 事件类型都去掉on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { 100px; height: 100px; background-color: orange; } </style> </head> <body> <div id = "a"></div> <script> let div = document. getElementById("a") function fn (){ console.log("hello"); } div.addEventListener("click", fn,false) div.removeEventListener("click",fn, false)