开关灯完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>关灯</button> <script> // 需求：点击按钮：如果按钮是 关灯 将页面的背景色变黑，将开关变成 开灯；相反反着做即可 /* 思路分析 1. 事件源：按钮 querySelector('button') 2. 事件类型：点击事件 onclick 3. 事件处理 3.1 获取按钮的值：innerText 3.2 获取body元素：querySelector('body') || document.body 3.3 判定按钮的值 * 关灯：背景色变黑，按钮的值变 开灯 * 开灯：背景色变亮，按钮的值变 关灯 */ // 思路分析 // 1. 事件源：按钮 querySelector('button') let btn = document.querySelector('button'); // console.log(btn); // 2. 事件类型：点击事件 onclick btn.onclick = function () { // 3. 事件处理 // 3.1 获取按钮的值：innerText // console.log(btn); let value = btn.innerText; // 3.2 获取body元素：querySelector('body') || document.body let body = document.body // console.log(body); // 3.3 判定按钮的值 if (value == '关灯') { // * 关灯：背景色变黑，按钮的值变 开灯 body.style.backgroundColor = '#000'; btn.innerText = '开灯'; } else { // * 开灯：背景色变亮，按钮的值变 关灯 body.style.backgroundColor = '' btn.innerText = '关灯'; } } </script> </body> </html>
事件介绍及注册事件
1.事件：js处理用户交互的一种机制
交互：什么元素在什么时刻做什么事
2.事件的三要素：组成事件的三要素
事件源：什么元素（div）
事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
事件处理函数：做什么事（一段代码：函数）
3.注册事件:本质是给元素属性赋值
事件源.事件类型 = 事件处理函数
box.onclick = function(){}
4.事件工作原理
a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
5.页面中 任何元素 都可以注册 很多个事件(点击，移入等)
禁用/启用按钮小练习
需求
1. 点击启用按钮，所有 的input都可以使用：disabled = false
2. 点击禁用按钮，所有 的input都不能使用：disabled = true
/* 禁用 思路分析 1. 事件源： 禁用按钮 #jy 2. 事件类型： 点击 onclick 3. 事件处理 3.1 获取所有input元素：querySelectorAll('input') 3.2 遍历取出每个input 3.3 给每个input 加上disabled属性 值为true */
效果图 ：
启用
禁用
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text"> <br> <input type="password"> <br> <input type="radio"> <br> <input type="checkbox"> <br> <input type="button" value="表单按钮"> <hr> <button id="qy">启用</button> <button id="jy">禁用</button> <script> // 需求 // 1. 点击启用按钮，所有 的input都可以使用：disabled = false // 2. 点击禁用按钮，所有 的input都不能使用：disabled = true /* 禁用 思路分析 1. 事件源： 禁用按钮 #jy 2. 事件类型： 点击 onclick 3. 事件处理 3.1 获取所有input元素：querySelectorAll('input') 3.2 遍历取出每个input 3.3 给每个input 加上disabled属性 值为true */ let jy = document.querySelector('#jy'); let qy = document.querySelector('#qy'); // 点击事件onclick jy.onclick = function () { //禁用所有input // console.log(jy);点击jy就是禁用 // 因为要点击禁用就禁用所有input所以用forEach遍历数组 let inputs = document.querySelectorAll('input'); inputs.forEach(function (inem) { // console.log(inem); // 禁用是disable inem.disabled = true }) } qy.onclick = function () { //禁用所有input // console.log(jy);点击jy就是禁用 // 因为要点击禁用就禁用所有input所以用forEach遍历数组 let inputs = document.querySelectorAll('input'); inputs.forEach(function (inem) { // console.log(inem); // 禁用是disable inem.disabled = false; }) } </script> </body> </html>
