JavaScript-计算器
Posted 极速小乌龟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript-计算器相关的知识，希望对你有一定的参考价值。
1 事件周期 2 DOM：3个阶段 3 1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数。默认,暂不触发任何事件 4 2.目标触发:优先触发目标元素绑定的事件处理函数 5 目标元素:实际点击的元素 6 3.冒泡:按照捕获的顺序，由内层，向外层逐层触发捕获的事件处理函数 7 修改事件触发的顺序: 8 btn.addEventListener("事件名称",函数对象,capture) 9 其中:capture表示是否在捕获阶段就提前触发 10 默认false,只在冒泡阶段才触发 11 改为true,在捕获阶段提前触发 12 13 阻止冒泡必须要用到的事件对象:event 14 事件发生时,自动创建的,封装事件信息的对象 15 还提供了对事件进行操作的API 16 如何获得event对象: 17 按照DOM对象:事件发生时会自动创建event对象 18 会将event对象作为事件处理函数的第一个参数自动传入 19 阻止冒泡:e.stopPropagation(); 20 e.target//获得目标元素 21 e.preventDefault()//阻止默认行为 22 利用冒泡: 23 优化:尽量少的创建事件监听对象 24 因为事件监听对象容易形成闭包，很难释放 25 解决:如果多个平级子元素需要绑定一次即可。所有子元素共用 26 核心问题:如何获得目标元素:e.target 27 28 <!DOCTYPE html> 29 <html> 30 <head lang="en"> 31 <meta charset="UTF-8"> 32 <title></title> 33 </head> 34 <body> 35 <div id="keys"> 36 <button>1</button> 37 <button>2</button> 38 <button>3</button> 39 <button>4</button> 40 <br/> 41 <button>C</button> 42 <button>+</button> 43 <button>-</button> 44 <button>=</button> 45 </div> 46 <textarea name="" id="sc" style="resize: none; width: 200px; height: 50px; "></textarea> 47 <script> 48 //定义函数calc,获得事件对象e 49 function calc(e){ 50 //获得目标元素e.target 51 var target= e.target; 52 //如果target是button 53 if(target.nodeName=="BUTTON"){ 54 //判断target的内容 55 switch (target.innerHTML){ 56 //是c 57 case "C": 58 //清除id为sc的元素的内容 59 sc.value="";break; 60 //如果是= 61 case "=": 62 try{//尝试: 63 //将sc的内容传人eval中，将结果保存回sc的内容中 64 sc.value=eval(sc.value); 65 } 66 catch (err){//如果出错 67 //将错误对象转为字符串，赋值给sc的内容 68 sc.value=String(err); 69 } 70 break; 71 default: //否则 72 //将target的内容拼接到sc的内容上 73 sc.value+=target.innerHTML; 74 } 75 } 76 } 77 //为id为keys的div添加单击事件监听，函数为calc 78 keys.addEventListener("click",calc); 79 80 </script> 81 </body> 82 </html>
以上是关于JavaScript-计算器的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象