JavaScript事件对象的介绍-优快云博客

概念：在触发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();
}