概念:在触发DOM事件的时候都会产生一个对象,这就是事件对象。
事件对象拥有的常用属性和方法:
1.type,获取事件类型
2.target,获取事件目标
3.stopPropagation(),阻止事件冒泡
4.preventDefault(),阻止事件默认行为
获取事件类型的场景:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset = "GBK">
<title>使用场景</title>
<body>
<input id = "pid" type="text" />
<script>
document.getElementById("pid").addEventListener("focus",pFunc);
document.getElementById("pid").addEventListener("change",pFunc);
function pFunc(event){
if(event.type == "focus")
alert("focus");
if(event.type == "change")
alert("change");
}
</script>
</body>
</html>
获取事件目标的使用场景和获取事件类型的差不多,基本上都是用来做判断时使用的。
stopPropagation(),阻止事件冒泡的使用场景
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset = "GBK">
<title>使用场景</title>
<body>
<div id="div">
<button id = "btn" >Button</button>
</div>
<script>
document.getElementById("btn").addEventListener("click",btnFunc);
document.getElementById("div").addEventListener("click",btnFunc);
function btnFunc(){
alert("click")
}
</script>
</body>
</html>
当点击按钮时会弹出两次"click";原因是因为事件的冒泡。
对btnFunc进行如下修改后只会产生一次提示
function btnFunc(event){
alert("click")
event.stopPropagation();
}