标签：
由于放假，信息没能及时更新，抱歉
学习内容：
事件对象：
在触发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>
标签：
原文地址：http://www.cnblogs.com/fenr9/p/5594280.html
