【什么是事件】
达到某个事先设定的条件，自动触发的动作
（常用事件）
【原生JS事件绑定】
（开关灯案例）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 .c1 { 9 height: 400px; 10 width: 400px; 11 border-radius: 50%; 12 } 13 14 .bg_green { 15 background-color: green; 16 } 17 18 .bg_red { 19 background-color: red; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="d1" class="c1 bg_red bg_green"></div> 25 <button id="d2">变色</button> 26 27 <script> 28 let btnEle = document.getElementById("d2") 29 let divEle = document.getElementById("d1") 30 btnEle.onclick = function () {//绑定点击事件 31 //动态的修改div标签的类属性:toggle 32 divEle.classList.toggle('bg_red') 33 } 34 </script> 35 </body> 36 </html>
（input框获取焦点失去焦点案例）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <input type="text" value="客官 来呀！！" id="d1"> 10 11 <script> 12 let iEle = document.getElementById('d1') 13 //获取焦点事件 14 iEle.onfocus = function () { 15 //获取焦点时，清空文本框的内容 16 iEle.value = '' 17 //点value就是获取 等号赋值就是设置 18 } 19 20 //失去焦点事件 21 iEle.onblur = function () { 22 //失去焦点时，设置文本框的内容 23 this.value = '没钱 不去'; 24 } 25 </script> 26 </body> 27 </html>
（实时展示当前时间案例）
1 展示实时时间-----但是死的，没有动态的展示 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Title</title> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 </head> 10 <body> 11 <input type="text" id="d1"> 12 13 <script> 14 let inputEle = document.getElementById('d1') 15 16 //1.访问页面之后，将访问的时间展示到input框中 17 function showTime() { 18 let currenTime = new Date(); 19 // 转成当地时间 20 inputEle.value = currenTime.toLocaleString(); 21 } 22 23 showTime(); 24 </script> 25 </body> 26 </html> 27 28 29 30 ================================================ 31 2. 每隔一秒，自动获取当前时间，展示到input框中-----动态获取 32 setInterval(showTime, 1000) 33 34 ================================================ 35 3.计时器 36 37 <!DOCTYPE html> 38 <html lang="en"> 39 <head> 40 <meta charset="UTF-8"> 41 <title>Title</title> 42 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 43 </head> 44 <body> 45 <input type="text" id="d1"> 46 <button id="d2">开始</button> 47 <button id="d3">结束</button> 48 49 <script> 50 //先定义一个全局存储定时器的变量 51 let t = null 52 let inputEle = document.getElementById('d1'); 53 //3. 添加两个按钮时间，开始按钮点击之后，开启定时器，结束按钮点击之后，清除定时器 54 let startEle = document.getElementById('d2'); 55 let endEle = document.getElementById('d3'); 56 57 //1.访问页面之后，将访问的时间展示到input框中 58 function showTime() { 59 let currenTime = new Date(); 60 // 转成当地时间 61 inputEle.value = currenTime.toLocaleString(); 62 } 63 64 // showTime(); 65 // 2. 每隔一秒，自动获取当前时间，展示到input框中 66 // setInterval(showTime, 1000) 67 68 // 3. 69 startEle.onclick = function () { 70 //限制定时器只能开一个 71 if (!t) { 72 t = setInterval(showTime, 1000);//每点击一次就会开始一个定时器，而t只指代最后一个} 73 } 74 } 75 endEle.onclick = function () { 76 clearInterval(t); 77 //还应该将t重置为空 78 t = null 79 } 80 </script> 81 </body> 82 </html>
（省市联动案例---点击上海，后面显示区）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <select name="" id="d1"> 10 <option value="" selected disabled>请选择</option> 11 </select> 12 <select name="" id="d2"></select> 13 14 <script> 15 let proEle = document.getElementById("d1") 16 let cityEle = document.getElementById("d2") 17 //先模拟省市数据 18 data = { 19 "河北省": ["石家庄", "保定", "邯郸", "廊坊"], 20 "北京市": ["朝阳区", "东城区", "西城区", "海淀区"], 21 "上海市": ["浦东新区", "徐汇区", "长宁区", "普陀区"], 22 "山东": ["济南", "青岛", "烟台", "威海"], 23 "江苏": ["南京", "苏州", "无锡", "常州"], 24 "河南": ["郑州", "洛阳", "开封", "焦作"] 25 } 26 //先for循环获取省 27 for (let key in data) { 28 //将省信息做成一个个option标签,添加到第一个select中 29 //1.创建option标签 30 let opEle = document.createElement("option"); 31 //2.设置文本 32 opEle.innerText = key; 33 //3.设置value 34 opEle.value = key;//option value='省'> 省</option > 35 //4.将option添加到select中 36 proEle.appendChild(opEle); 37 } 38 39 //文本域变化事件 change事件 40 proEle.onchange = function () { 41 //先获取到用户选择的省 42 let currentPro = proEle.value; 43 //获取对应的市信息 44 let currentCityList = data[currentPro]; 45 //清空市select中所有的option 46 cityEle.innerHTML = ""; 47 //加一个请选择 48 let opEle = document.createElement("option"); 49 opEle.innerText = "请选择"; 50 cityEle.appendChild(opEle); 51 //for循环所有的市，渲染到第二个select中 52 for (let i = 0; i < currentCityList.length; i++) { 53 let currentCity = currentCityList[i]; 54 //1.创建option标签 55 let opEle = document.createElement("option"); 56 //2.设置文本 57 opEle.innerText = currentCity; 58 //3.设置value 59 opEle.value = currentCity; 60 //4.将option添加到select中 61 cityEle.appendChild(opEle); 62 } 63 64 } 65 </script> 66 </body> 67 </html>
