首页 > 代码库 > JavaScript-计算器

JavaScript-计算器

2024-08-30 10:46:32   220人阅读

 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=http://www.mamicode.com/eval(sc.value);
65                        }
66         catch (err){//如果出错
67             //将错误对象转为字符串，赋值给sc的内容
68             sc.value=http://www.mamicode.com/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-计算器


联系
我们