JS(Dom事件操作)第十九 今天的内容又是事件
事件这个词你是如何理解的呢！
鼠标单机事件触发按钮执行内容
分析代码 得出自己的结论
事件三要素
- 事件源（谁）：触发事件的元素
- 事件类型（什么事件）： 例如 click 点击事件
- 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
分析代码 得出自己的结论 事件三要素 - 事件源（谁）：触发事件的元素 - 事件类型（什么事件）： 例如 click 点击事件 - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
举出一个案例自己不能推出三个案例则不复也
案例一 常看到的事件操作代码实战
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件的文件基础信息</title> <style> * { background-color: rgb(0, 232, 232); } #input_text { border: 2px solid paleturquoise; width: 300px; height: 300px; margin: auto; background-color: red; color: white; border-radius: 12px; font-size: 30px; } #input_text1 { border: 2px solid rgb(20, 20, 20); width: 300px; height: 300px; margin: auto; background-color: rgb(255, 255, 255); color: rgb(247, 9, 9); border-radius: 12px; font-size: 30px; } .input_text1 { border: 2px rgb(255, 0, 0); width: 300px; height: 300px; margin: auto; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0); border-radius: 12px; font-size: 30px; } .input_text2 { border: 1px rgb(0, 0, 0); width: 300px; height: 300px; margin: auto; background-color: rgb(255, 255, 255); color: rgb(255, 255, 255); border-radius: 12px; font-size: 30px; display: block; } </style> </head> <body onload="checkCookies()"> <!-- 事件三要素 - 事件源（谁）：触发事件的元素 - 事件类型（什么事件）： 例如 click 点击事件 - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 --> <!-- 事件一 鼠标单机事件 --> <!-- onclick鼠标单机左边生效 --> <button id="input_text">我是用户的单机事件</button> <script> var btn = document.getElementById("input_text") console.log(btn) btn.onclick = function () { var ss=document.querySelector("#input_text") ss.textContent="我是自定义的函数的单机事件信息内容" alert("我是用户实现的单机事件") btn.style.backgroundColor = 'pink' btn.style.color = 'red' btn.addEventListener("click",function(){ console.log("btn.addEventListener 创建单机事件") }) } </script> <!-- ondblclick 鼠标双击时 鼠标 --> <button id="input_text1">我是用户的鼠标两次单机的事件</button> <script> var btn1 = document.querySelector("#input_text1") console.log(btn1) btn1.ondblclick = function () { confirm("我是用户的鼠标两次单机的事件") btn1.style.backgroundColor = 'green' } // onkeydown 键盘按下 键盘 btn1.onkeydown = function () { window.alert("键盘按下的事件") btn1.style.height = '100px' } // onkeypress 键盘按键（含按下与抬起） 键盘 btn1.onkeypress = function () { console.log("键盘按键（含按下与抬起） 键盘 事件") btn1.style.backgroundColor = 'yellow' } </script> <button class="input_text1">键盘抬起</button> <script> var btn2 = document.querySelector(".input_text1") // onkeyup 键盘抬起 键盘 btn2.onkeyup = function () { alert("键盘抬起来使用的事件") btn2.style.height = '200px' btn2.style.color = 'black' } // onmousedown 鼠标按下时 鼠标 btn2.onmousedown = function () { alert("onmousedown 鼠标按下时 鼠标") btn2.style.backgroundColor = 'yellow' } // 鼠标的移入移出事件 移出时 // onmousemove 鼠标移动时 鼠标onmouseup 鼠标抬起时 鼠标onmouseout 鼠标移出时 鼠标 onmouseover 鼠标移入时 鼠标 btn2.onmousemove = function () { btn2.style.backgroundColor = 'orange' btn2.style.height = '250px' } // 移出 btn2.onmouseout = function () { btn2.style.backgroundColor = 'red' btn2.style.height = '400px' btn2.style.color = ' white' } </script> <button class="input_text2" onmouseover=sut()>鼠标移入事件</button> <script> function all() { var btn3 = document.querySelector(".input_text2") btn3.onmouseover = function () { btn3.style.backgroundColor = 'red' btn3.style.color = 'white' } // 移出 btn3.onmouseout = function () { btn3.style.height = '400px' btn3.style.color = ' white' btn3.style.display = 'none' } } function sut() { all() } </script> <script> function checkCookies() { if (navigator.cookieEnabled == true) { alert("Cookies 可用") } else { alert("Cookies 不可用") } } </script> </body> </html>
案例二 事件冒泡
先看运行结果
当用户点击body元素时
当用户点击span标签时
当用户点击p标签时
当用户点击div元素的时候
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> div { width: 200px; height: 200px; background-color: cornflowerblue; text-align: center; line-height: 200px; } span { border: 3px solid red; background-color: aliceblue; background-color: antiquewhite; height: 100%; } p { background-color: aquamarine; color: red; } body { background-color: aliceblue; } </style> <div>我是div <span>我是span <p>我是p标签的内容信息</p> </span> </div> <script> var body = document.body; var divel = document.querySelector("div"); var spanel = document.querySelector("span"); var pel = document.querySelector("p") </script> </body> </html>
下面的this只代表这谁
pel.onclick = function () { console.log(this.textContent); } spanel.onclick = function () { console.log(this.textContent); } divel.onclick = function () { console.log(this.textContent); } body.onclick = function () { console.log(this) } document.onclick = function () { console.log(this) } window.onclick = function () { console.log(this) }
事件的冒泡从来面到外面依次执行
案例三 事件捕获
先看运行的效果流程
当我点击p标签时候
当我点击span标签时
当我点击div时
单我点击BOTY元素时
45d760d12d8c4f70bfc62765ca35b5bc.png 当我点击div时 1dcb92f2da0e405782af52b7e70d7821.png 单我点击BOTY元素时
<script> var body = document.body; var divel = document.querySelector("div"); var spanel = document.querySelector("span"); var pel=document.querySelector("p") divel.addEventListener("click",function(){ window.dispatchEvent(new Event("ghjkl")) }) window.addEventListener("ghjkl",function(e){ console.log(e) }) pel.onclick=function(){ console.log(this.textContent); } spanel.onclick = function () { console.log(this.textContent); } divel.onclick = function (e) { console.log(this.textContent); console.log(this==divel) console.log(this===divel) e.stopPropagation() alert("组织") } body.onclick = function () { console.log(this) } document.onclick = function () { console.log(this) } window.onclick = function () { console.log(this) } // 事件捕获 // 先捕获到目标事件然后在mao body.addEventListener("click", function (e) { console.log(this) console.log(e.type) //事件的类型 console.log(e.clientX, e.clientY) //客户端 console.log(e.target) //当前处理事件 console.log(e.currentTarget) //当前处理事件 console.log(e.eventPhase) //事件所处在的阶段 console.log(e.offsetX, e.offsetY) //事件发生的元素内 console.log(e.pageX, e.pageY) //事件发生在document的位置 console.log(e.screenX, e.screenY) // 相对屏幕的位置 }, true) divel.addEventListener("click", function () { }, true) spanel.addEventListener("click", function (e) { }, true) document.addEventListener("click", function (e) { }, true) window.addEventListener("click", function (e) { console.log(this) console.log(this) console.log(e.type) //事件的类型 console.log(e.clientX, e.clientY) //客户端 console.log(e.target) //当前处理事件 console.log(e.currentTarget) //当前处理事件 console.log(e.eventPhase) //事件所处在的阶段 console.log(e.offsetX, e.offsetY) //事件发生的元素内 console.log(e.pageX, e.pageY) //事件发生在document的位置 console.log(e.screenX, e.screenY) // 相对屏幕的位置 }, true) </script>
