事件周期
DOM：3个阶段
1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数。默认,暂不触发任何事件
2.目标触发:优先触发目标元素绑定的事件处理函数
目标元素:实际点击的元素
3.冒泡:按照捕获的顺序，由内层，向外层逐层触发捕获的事件处理函数
修改事件触发的顺序:
btn.addEventListener("事件名称",函数对象,capture)
其中:capture表示是否在捕获阶段就提前触发
默认false,只在冒泡阶段才触发
改为true,在捕获阶段提前触发 阻止冒泡必须要用到的事件对象:event
事件发生时,自动创建的,封装事件信息的对象
还提供了对事件进行操作的API
如何获得event对象:
按照DOM对象:事件发生时会自动创建event对象
会将event对象作为事件处理函数的第一个参数自动传入
阻止冒泡:e.stopPropagation();
e.target//获得目标元素
e.preventDefault()//阻止默认行为
利用冒泡:
优化:尽量少的创建事件监听对象
因为事件监听对象容易形成闭包，很难释放
解决:如果多个平级子元素需要绑定一次即可。所有子元素共用
核心问题:如何获得目标元素:e.target <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="keys">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<br/>
<button>C</button>
<button>+</button>
<button>-</button>
<button>=</button>
</div>
<textarea name="" id="sc" style="resize: none; width: 200px; height: 50px; "></textarea>
<script>
//定义函数calc,获得事件对象e
function calc(e){
//获得目标元素e.target
var target= e.target;
//如果target是button
if(target.nodeName=="BUTTON"){
//判断target的内容
switch (target.innerHTML){
//是c
case "C":
//清除id为sc的元素的内容
sc.value="";break;
//如果是=
case "=":
try{//尝试:
//将sc的内容传人eval中，将结果保存回sc的内容中
sc.value=eval(sc.value);
}
catch (err){//如果出错
//将错误对象转为字符串，赋值给sc的内容
sc.value=String(err);
}
break;
default: //否则
//将target的内容拼接到sc的内容上
sc.value+=target.innerHTML;
}
}
}
//为id为keys的div添加单击事件监听，函数为calc
keys.addEventListener("click",calc); </script>
</body>
</html>