事件对象:在触发DOM对象的时候会产生一个对象。
事件对象event:type表示的是事件的类型;target表示的是获取事件目标;stopPropagation()表示的是阻止事件的冒泡;preventDefault()表示的是阻止事件的默认行为。
事件的冒泡是 从下往上执行事件;事件的捕获是从上往下执行事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<button id="btn">点击</button>
</div>
<a href="http://www.baidu.com" id="aa">点击试试</a>
<script type="text/javascript">
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var a = document.getElementById("aa");
btn.addEventListener("click",demo);
box.addEventListener("click",demot);
a.addEventListener("click",demof);
function demo(event){
alert(event.type);
// 阻止事件的冒泡
event.stopPropagation();
};
function demot(){
alert(2);
};
function demof(event) {
event.preventDefault();//阻止事件的默认行为
}
</script>
</body>
</html>
阻止事件冒泡实例,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
width: 600px;
height: 600px;
background-color: red;
}
#box1 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="box1">点击试试</div>
<button id="btn">点击</button>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
var box1 = document.getElementById("box1");
var btn = document.getElementById("btn");
box.οnclick=function(){
box1.style.display = "none";
};
btn.onclick = function(event) {
event.stopPropagation();
box1.style.display = "block";
}
</script>
</body>
</html>