事件
事件：触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。
事件三要素
- 事件源:触发(被)事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
var box = document.getElementById('box'); box.onclick = function() { console.log('代码会在box被点击后执行'); };
案例
1.点击按钮修改多个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="按钮" id="btn"> <div> <p>我是一个p</p> <p>我是一个p</p> <p>我是一个p</p> <p>我是一个p</p> <p>我是一个p</p> </div> <script> document.getElementById("btn").onclick=function () { var pObjs=document.getElementsByTagName("p"); for (var i=0;i<pObjs.length;i++) pObjs[i].innerText="我们不是p，我们是你们的爸爸"; } </script> </body> </html>
2.排他功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>排他</title> </head> <body> <input type="button" value="没怀孕"/> <input type="button" value="没怀孕"/> <input type="button" value="没怀孕"/> <input type="button" value="没怀孕"/> <input type="button" value="没怀孕"/> <input type="button" value="没怀孕"/> <script> //获取所有的按钮,分别注册点击事件 var btnObjs = document.getElementsByTagName("input"); //循环遍历所有的按钮 for (var i = 0; i < btnObjs.length; i++) { //为每个按钮都要注册点击事件 btnObjs[i].onclick = function () { //把所有的按钮的value值设置为默认的值:没怀孕 for (var j = 0; j < btnObjs.length; j++) { btnObjs[j].value = "没怀孕"; } //当前被点击的按钮设置为:怀孕了 this.value = "怀孕了"; }; } //for循环是在页面加载的时候,执行完毕了 // for(var k=0;k<5;k++){ // // } // console.log(k);// //事件是在触发的时候,执行的 </script> </body> </html>
3.点击按钮改变div的属性设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有压力</title> <style> div{ width: 300px; height: 200px; background-color: darkmagenta; } </style> </head> <body> <input type="button" value="隐藏" id="btn"/> <input type="button" value="变身后显示" id="btn2"/> <input type="button" value="第二种隐藏" id="btn3"/> <div id="dv"> </div> <script src="common.js"></script> <script> //根据id获取按钮,注册点击事件,添加事件处理函数 my$("btn").onclick=function () { my$("dv").style.display="none"; }; my$("btn2").onclick=function () { my$("dv").style.width = "300px"; my$("dv").style.height = "200px"; my$("dv").style.backgroundColor = "pink"; my$("dv").style.display="block"; }; my$("btn3").onclick=function() { if(this.value=="第二种隐藏"){ my$("dv").style.display="none";//隐藏 this.value="显示"; }else if(this.value=="显示"){ my$("dv").style.display="block";//显示 this.value="第二种隐藏";} }; </script> </body> </html>
4.隐藏于显示的另一种方法（改变类名）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ddd</title> <style> div { width: 300px; height: 200px; background-color: yellow; border: 2px solid red; } .cls { display: none; } </style> </head> <body> <input type="button" value="隐藏" id="btn"/> <div id="dv"></div> <script src="common.js"></script> <script> //点击按钮,通过类样式的方式设置div的显示和隐藏 my$("btn").onclick = function () { // console.log(my$("dv").className); //判断的是div是否应用了类样式 if (my$("dv").className != "cls") { //现在是显示的,应该隐藏 my$("dv").className = "cls"; this.value = "显示"; } else { //隐藏的状态----立刻显示 my$("dv").className = ""; this.value = "隐藏"; } }; </script> </body> </html>
其他案例
https://blog.csdn.net/weixin_45525272/article/details/108097295
