JavaScript编程基础（五）细说事件与实战之经典计算器

原创 阁主  2023-08-09 17:37:44  阅读 2049 次 评论 0 条
摘要：

继续上次的JavaScript编程基础（四）继续学习，简单记录学习PHP中文网23期JavaScript基础知识，内容包括：dataset自定义属性、class属性、getComputedStyle计算样式、事件添加与派发、事件冒泡、事件冒泡: 事件代理/委托

dataset 对象

  1. 预定义属性: id,class,style, title...
  2. 自定义属性: data-前缀
  3. 注: data-不要写,蛇形->驼峰
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>dataset: 自定义属性</title>
  8.   </head>
  9.   <body>
  10.     <!--
  11.         属性
  12.         1. 内置属性: id, class, style,...
  13.         2. 自定义属性: data-前缀
  14.            data-uname, data-my-email
  15.      -->
  16.     <div
  17.       id="user_id"
  18.       class="user_class"
  19.       style="color: red"
  20.       data-uname="朱老师"
  21.       data-my-email="zhu@qq.com"
  22.     >
  23.       用户信息
  24.     </div>
  26.     <script>
  27.       const div = document.querySelector("div");
  29.       // 1. 访问内置属性: obj.prop
  30.       console.log(div.id);
  31.       // class是关键字, className -> class
  32.       console.log(div.className);
  33.       // 返回CSSStyleDeclaration对象
  34.       console.log(div.style);
  35.       console.log(div.style.color);
  37.       //   ====================================
  39.       // 2. 自定义属性: dataset.prop
  40.       //  data-uname="朱老师"
  41.       // data-: 省略
  42.       console.log(div.dataset["uname"]);
  43.       // 合法属性可以直接用点语法访问
  44.       console.log(div.dataset.uname);
  45.       //   data-my-email="zhu@qq.com"
  46.       // 蛇形 -> 小驼峰, user_name  -> userName
  47.       console.log(div.dataset["my-email"]);
  48.       console.log(div.dataset["myEmail"]);
  49.       console.log(div.dataset.myEmail);
  50.     </script>
  51.   </body>
  52. </html>

getComputedStyle对象

  • 计算样式: 元素上的全样样式,包括行内,文档,外部等
  • 只读

style1.css代码：

  1. h2 {
  2.   background-color: yellow;
  3. }

完整示例代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>getComputedStyle: 计算样式</title>
  8.     <link rel="stylesheet" href="style1.css" />
  9.     <!-- 文档样式 -->
  10.     <style>
  11.       h2 {
  12.         border: 1px solid #000;
  13.         width: 200px;
  14.         height: 50px;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <!-- 行内样式 -->
  20.     <h2 style="color: red">Hello world</h2>
  22.     <script>
  23.       const h2 = document.querySelector("h2");
  25.       // 行内样式style=""
  26.       console.log(h2.style.color);
  28.       // 文档样式<style>
  29.       console.log(h2.style.width);
  30.       console.log(h2.style.height);
  31.       console.log(h2.style.backgroundColor);
  33.       // 一个元素最终样式,由行内,文档,外部css共同作用的结果
  35.       //   全局函数, 计算属性,可以获取元素上的任何css属性
  36.       // console.log(window.getComputedStyle(h2));
  37.       console.log(window.getComputedStyle(h2).width);
  38.       console.log(window.getComputedStyle(h2).height);
  39.       console.log(typeof window.getComputedStyle(h2).height);
  40.       console.log(window.getComputedStyle(h2).backgroundColor);
  42.       // 宽度
  43.       let width = window.getComputedStyle(h2).width;
  44.       console.log(typeof width);
  45.       // 转换为整数
  46.       console.log(typeof parseInt(width), parseInt(width));
  47.       // 根据 任何数乘以1 都不变,但是一个数字字符串乘以1, 会发生类型的自动转换
  48.       console.log(typeof ("123" * 1), "123" * 1);
  50.       width = parseInt(width);
  51.       h2.style.width = "300px";
  52.       h2.style.width = width + 100 + "px";
  53.     </script>
  54.   </body>
  55. </html>

classList

这是专用于操作元素的class属性

  1. 添加: classList.add()
  2. 判断: classList.contains()
  3. 替换: classList.replace()
  4. 移除: classList.remove()
  5. 切换: classList.toggle()
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>classList: class属性</title>
  8.     <style>
  9.       .red {
  10.         color: red;
  11.       }
  12.       .blue {
  13.         color: blue;
  14.       }
  15.       .bgc {
  16.         background-color: yellow;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <h2 class="red">Hello world</h2>
  22.     <script>
  23.       const h2 = document.querySelector("h2");
  24.       // 1. 传统: className
  25.       // 添加 <h2 class="red">...</h2>
  26.       h2.className = "red";
  27.       h2.className = "red bgc";
  28.       // 删除
  29.       h2.className = "";
  31.       // =================================
  33.       // 2. classList
  34.       // 添加
  35.       h2.classList.add("red");
  36.       h2.classList.add("bgc");
  37.       h2.classList.add("red", "bgc");
  38.       /// 替换
  39.       h2.classList.replace("red", "blue");
  40.       // 删除
  41.       h2.classList.remove("bgc", "blue");
  42.       // 切换: 自动在 add() , remove() 之间自动切换
  43.       h2.classList.toggle("red");
  44.     </script>
  45.   </body>
  46. </html>

事件基础

  • 事件 3 要素
  1. 事件名称: 字符串, click, keydown, scroll
  2. 事件主体: 元素, <button>,<div>,<form>...
  3. 事件方法: 函数, function(ev){}, ()=>{}
  • 事件增删
  1. 事件添加: 事件属性, addEventListener()
  2. 事件删除: null,removeEventListener()
  3. 事件派发:dispatchEvent()
  • 定时器
  1. 一次性: setTimeout()
  2. 间歇式: setInterval()
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>事件添加与派发</title>
  8.   </head>
  9.   <body>
  10.     <!-- 1. 标签属性: 事件属性 tag.on+事件名称 -->
  11.     <button onclick="alert('登陆成功')">登录</button>
  13.     <!-- =================================== -->
  15.     <!-- 2. html对象属性: obj.onclick  -->
  16.     <button class="save">保存</button>
  17.     <script>
  18.       let saveBtn = document.querySelector(".save");
  19.       saveBtn.onclick = function () {
  20.         alert("保存成功");
  21.       };
  22.       saveBtn.onclick = function () {
  23.         alert("保存失败");
  24.       };
  26.       // 删除
  27.       saveBtn.onclick = null;
  29.       //   onclick: 不能重复添加同名事件
  30.     </script>
  32.     <!-- =================================== -->
  34.     <!-- 3. 事件监听器: obj.addEventListener() -->
  35.     <button class="submit">提交</button>
  36.     <script>
  37.       let submitBtn = document.querySelector(".submit");
  38.       // submitBtn.addEventListener(事件名称,事件方法,是否冒泡false)
  39.       submitBtn.addEventListener("click", function () {
  40.         alert("提交成功");
  41.       });
  43.       // 简写
  44.       submitBtn.addEventListener("click", () => alert("提交成功"));
  46.       submitBtn.addEventListener("click", function () {
  47.         alert("提交失败");
  48.       });
  50.       //   submitBtn.removeEventListener('click', 不能用匿名函数)
  52.       // addEventListener():注册的同名事件方法会依次触发
  53.     </script>
  55.     <!-- =================================== -->
  57.     <!-- 4. (自定义)事件派发 -->
  58.     <button class="ads">广告位</button>
  59.     <script>
  60.       const adsBtn = document.querySelector(".ads");
  62.       let money = 0;
  64.       // 点击一次赚10元
  65.       adsBtn.addEventListener("click", function () {
  66.         console.log((money += 10) + " 元");
  67.       });
  69.       // 定时器: 自动累加赚钱
  70.       /**
  71.        * 定时器
  72.        * 1. 一次性: setTimeout(function(){}, time)
  73.        * 2. 间歇式: setInterval(function(){}, time)
  74.        */
  76.       setTimeout(function () {
  77.         console.log("大家晚上好");
  78.       }, 2000);
  80.       setInterval(function () {
  81.         console.log("大家晚上好");
  82.       }, 2000);
  84.       setInterval(function () {
  85.         console.log((money += 10) + " 元");
  86.       }, 1000);
  88.       // 创建一个机器人, 帮我去点击
  89.       // 机器人 -> 自定义事件去模拟它
  91.       const myClick = new Event("click");
  93.       setInterval(function () {
  94.         adsBtn.dispatchEvent(myClick);
  95.       }, 1000);
  97.       // 赚够250元, 就停止
  99.       let timer = setInterval(function () {
  100.         adsBtn.dispatchEvent(myClick);
  101.         // 如果money >= 250 ,就不要点击
  102.         if (money >= 250) {
  103.           // 清除定时器
  104.           // 如果是setTimeout(),用 clearTimeout()来清除
  105.           // 如果是setInterval(), 用clearInterval()
  106.           clearInterval(timer);
  107.           console.warn(`今天已经赚了${money}元,明天再来吧`);
  108.         }
  109.       }, 1000);
  110.     </script>
  111.   </body>
  112. </html>

事件冒泡

  1. 事件由内向外,逐级向上传递,直到根元素
  2. 事件冒泡可以被禁用:ev.stopPropagation()
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>事件冒泡</title>
  8.     <style>
  9.       .box {
  10.         border: 1px solid;
  11.         padding: 15px;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <div class="box box1">
  17.       box1
  18.       <div class="box box2">
  19.         box2
  20.         <div class="box box3">box3</div>
  21.       </div>
  22.     </div>
  24.     <script>
  25.       const boxes = document.querySelectorAll(".box");
  26.       // 为每个div添加一个点击事件
  27.       boxes.forEach(function (box) {
  28.         box.addEventListener(
  29.           "click",
  30.           function () {
  31.             console.log(this.className.replace("box", ""));
  33.             // 取消冒泡
  34.             // 事件对象 event, 总是可用
  35.             console.log(event.stopPropagation());
  36.           },
  37.           false
  38.         );
  39.       });
  41.       /**
  42.        * 冒泡前提
  43.        * 1. 元素之间存在层次关系
  44.        * 2. 祖先元素也定义与之同名的事件
  45.        */
  47.       /**
  48.        * addEventListener(event,callback,是否冒泡false)
  49.        * 1. false: 默认值,冒泡(从内向外)
  50.        * 2. true: 捕获 ( 从外向内 )
  51.        */
  52.     </script>
  53.   </body>
  54. </html>

事件代理

  1. 利用事件冒泡,将子元素事件委托到父级上触发
  2. 事件代理机制,可以极大的简化事件添加操作
  3. 事件绑定主体ev.currentTarge
  4. 事件触发主体: ev.target
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>事件冒泡: 事件代理/委托</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list1">
  11.       <li class="item">电脑</li>
  12.       <li class="item">手机</li>
  13.       <li class="item">外套</li>
  14.     </ul>
  15.     <hr />
  16.     <ul class="list2">
  17.       <li class="item">西瓜</li>
  18.       <li class="item">苹果</li>
  19.       <li class="item">草莓</li>
  20.     </ul>
  22.     <script>
  23.       // 任务: 点击任何一个<li>,显示内容
  25.       // 1. 传统
  26.       const items = document.querySelectorAll(".list1 > .item");
  27.       items.forEach((item) => {
  28.         item.onclick = function (ev) {
  29.           // ev: 事件对象
  30.           console.log(ev);
  32.           // 事件绑定者: ev.currentTarget
  33.           console.log(ev.currentTarget);
  35.           // 事件触发者: ev.target
  36.           console.log(ev.target);
  38.           // this
  39.           console.log(this);
  41.           console.log(this === ev.target);
  42.           console.log(ev.currentTarget === ev.target);
  44.           // 因为三者完全相同所以用哪个都可以获取内容
  45.           console.log(ev.currentTarget.textContent);
  46.         };
  47.       });
  49.       // ====================================
  51.       //   事件冒泡: 子元素上的同名事件,会自动冒泡到父元素上面去触发
  53.       // 2. 事件代理
  55.       const list = document.querySelector(".list2");
  57.       list.onclick = function (ev) {
  58.         // 事件绑定者: ev.currentTarget, 父元素
  59.         console.log(ev.currentTarget);
  61.         // 事件触发者: ev.target, 子元素
  62.         console.log(ev.target);
  64.         // this
  65.         console.log(this);
  66.         console.log(this === ev.currentTarget);
  67.         console.log(this === ev.target);
  69.         // 需要用时间触发者来获取元素文本
  70.         console.log(ev.target.textContent);
  71.       };
  72.     </script>
  73.   </body>
  74. </html>

实战计算器

index.html:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>计算器</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 事件代理, eval() -->
  13.     <div class="calculator">
  14.       <!-- 结果区 -->
  15.       <input type="text" class="result" value="0" readonly />
  16.       <!-- 按键区 -->
  17.       <div class="btns" onclick="calculator(event)">
  18.         <button>F1</button>
  19.         <button>F2</button>
  20.         <button>CE</button>
  21.         <button>AC</button>
  22.         <button>7</button>
  23.         <button>8</button>
  24.         <button>9</button>
  25.         <button>/</button>
  26.         <button>4</button>
  27.         <button>5</button>
  28.         <button>6</button>
  29.         <button>X</button>
  30.         <button>1</button>
  31.         <button>2</button>
  32.         <button>3</button>
  33.         <button>-</button>
  34.         <button>0</button>
  35.         <button>.</button>
  36.         <button>=</button>
  37.         <button>+</button>
  38.       </div>
  39.     </div>
  40.     <script src="script.js"></script>
  41.   </body>
  42. </html>

style.css：

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. body {
  7.   background-color: #eee;
  8. }
  10. .calculator {
  11.   min-width: 360px;
  12.   max-width: 460px;
  13.   border-radius: 8px;
  14.   background-color: #666;
  15.   padding: 15px;
  16.   display: grid;
  17.   grid-template-rows: 60px 1fr;
  18.   gap: 20px;
  19.   margin: 40px auto;
  20. }
  21. .calculator .result {
  22.   font-size: 32px;
  23.   font-weight: bolder;
  24.   text-align: right;
  25.   padding: 6px;
  26.   border: none;
  27.   outline: none;
  28.   border-radius: 8px;
  29.   background-color: #cecece;
  30.   box-shadow: 2px 2px 2px #333 inset;
  31. }
  32. .calculator .btns {
  33.   display: grid;
  34.   grid-template-columns: repeat(4, 1fr);
  35.   grid-auto-rows: 50px;
  36.   gap: 15px;
  37. }
  38. .calculator .btns > * {
  39.   font-size: 32px;
  40.   font-weight: bolder;
  41.   border-radius: 8px;
  42.   color: #888;
  43.   border: none;
  44.   outline: none;
  45.   background-color: #444;
  46.   box-shadow: 2px 2px 2px #000;
  47. }
  49. .calculator .btns *:nth-child(-n + 4) {
  50.   background-color: #222;
  51. }
  52. .calculator .btns *:nth-child(-n + 4):hover,
  53. .calculator .btns > *:hover {
  54.   cursor: pointer;
  55.   opacity: 0.7;
  56.   color: white;
  57.   transition: 0.3s;
  58. }

script.js：

  1. // 计算函数
  2. function calculator(ev) {
  3.   // 显示结果区
  4.   const result = document.querySelector('.result')
  6.   // 当前按钮(事件代理)
  7.   if (ev.target.tagName !== 'BUTTON') return false
  9.   // 当前按钮
  10.   const curBtn = ev.target
  12.   // 按钮内容
  13.   let content = curBtn.textContent
  15.   //   eval('字符串表达式'): 将一个字符串表达式进行计算并返回结果
  17.   // 将内容显示到结果区
  18.   // 根据用户点击的按钮内容确定要执行的操作
  19.   switch (content) {
  20.     // AC 清零
  21.     case 'AC':
  22.       result.value = 0
  23.       break
  25.     // CE: 退格
  26.     case 'CE':
  27.       // 如果结果区有内容
  28.       if (result.value.length == 1 || result.value == '错误') {
  29.         result.value = 0
  30.       } else {
  31.         // 删除最后一个字符
  32.         // slice(startIndex,endIndex),结果中不包含结束索引的值
  33.         result.value = result.value.slice(0, -1)
  34.       }
  35.       break
  37.     // F1
  38.     case 'F1':
  39.       break
  40.     // F2
  41.     case 'F2':
  42.       break
  44.     // = : 计算结果
  45.     case '=':
  46.       // 缓存结果
  47.       let tmpResult = 0
  49.       try {
  50.         //   如果是乘法,将 "X" 换成 "*"
  51.         result.value = result.value.replace('X', '*')
  52.         // 计算字符串表达式
  53.         tmpResult = eval(result.value)
  55.         // 如果结果是小数,仅保留5位就可以了
  56.         if (tmpResult.toString().includes('.')) {
  57.           tmpResult = tmpResult.toFixed(5)
  58.           // 如果小数部分出现了多余的0,应该去掉(对结果精度没影响)
  59.           tmpResult = parseFloat(tmpResult)
  60.         }
  62.         // 显示出结果
  63.         result.value = tmpResult
  64.       } catch {
  65.         result.value = '错误'
  66.       }
  68.       break
  70.     default:
  71.       // 如果当前结果区显示有前导0,先清空, 防止出现前导0
  72.       if (result.value == 0 || result.value == '错误') result.value = ''
  73.       result.value += content
  74.   }
  75. }
  77. /**
  78.  * 知识点总结
  79.  * 1. 事件代理
  80.  * 2. eval()
  81.  * 3. try-catch
  82.  * 4. toFixed()
  83.  */
  85. /**
  86.  * 作业
  87.  * 1. 处理除零错误
  88.  * 2. 处理操作符位于表达式首位的错误
  89.  */

完整代码附件：

calculator.zip大小：3KB
已经过安全软件检测无毒，请您放心下载。
本文地址：https://www.mainblog.cn/330.html
版权声明：本文为原创文章，版权归 阁主 所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。

评论已关闭！