第四天:事件对象(常用的两个属性和两个方法)
由于放假,信息没能及时更新,抱歉
学习内容:
事件对象:
在触发DOM事件的时候,都会产生一个对象
事件的常见属性
type :获取事件类型
target: 获取事件目标
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
</head>
<body>
<button id="btn" onclick="">按钮</button>
</body>
<script>
document.getElementById("btn").addEventListener("click",showType);
function showType(event){
// alert(event.type); 获取事件的类型 “click”,如果修改成mouseover也可以
alert(event.target); 获取事件的目标
}
</script>
</html>
补充说明:
获取事件类型时,弹出对话框,对话框显示内容为click
获取事件目标时,点击按钮,弹出框如下:
事件的常见方法
stopPropagation():阻止事件冒泡
preventDefault() :阻止事件默认行为
举例说明什么是事件冒泡
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="">按钮</button>
</div>
</body>
<script>
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
function showType(event){
alert(event.target);
}
function showDiv(event){
alert("div");
}
</script>
</html>
运行结果:
点击按钮,弹出了对话框,返回事件目标,关闭对话框后,再次弹出对话框内容为“div”
虽然只是点击了按钮,但是事件向上传递,因为button属于div中,这就是事件的冒泡,如何阻止事件的冒泡,就增加如下一条代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="">按钮</button>
</div>
</body>
<script>
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
function showType(event){
alert(event.target);
event.stopPropagation(); //阻止事件冒泡
}
function showDiv(event){
alert("div");
}
</script>
</html>
阻止事件的冒泡,则第一个框弹出后,不会弹出showdiv这个函数的内容
阻止事件的默认行为
什么是事件的默认行为,例如我们添加一个连接,连接文字“百度”就会默认跳转到百度页
例如:<a href="http://www.baidu.com" >百度</a>
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
</head>
<body>
<div id="div">
<button id="btn" onclick="">按钮</button>
<a href="http://www.baidu.com" id="aid">百度</a>
</div>
</body>
<script>
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event){
alert(event.target);
event.stopPropagation();
}
function showDiv(event){
alert("div");
}
function showA(event){
event.stopPropagation(); // 阻止了冒泡行为,不然先跳出div
event.preventDefault(); //阻止了默认行为,打开百度
}
</script>
</html>