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>
浙公网安备 33010602011771号