您的位置：首页 > Web前端 > JavaScript

Javascript 事件对象（三）事件冒泡

2014-06-12 00:02 267 查看

事件流
---事件冒泡
取消冒泡：ev.cancelBubble=true

---事件捕获
Ie下是没有的，在绑定事件中，标准下是有的

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {padding: 40px;}
#div1 {background:red}
#div2 {background:green}
#div3 {background:blue; position: absolute; top: 300px;}
</style>
<script>
window.onload = function() {

/*
事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制
*/

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');

function fn1() {
alert( this.id );
}

//oDiv1.onclick = fn1;  给**加事件，给元素加事件处理函数
//事件函数绑定
oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1
//oDiv2.onclick = fn1;
oDiv3.onclick = fn1;

//我在马路边捡到一分钱，把他交个警察叔叔
/*我.on马路边捡到一分钱 = function() {
把他交个警察叔叔
}*/

}
</script>
</head>

<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>

事件冒泡实例：（侧边栏分享）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
</style>
<script>
window.onload = function() {

var oDiv = document.getElementById('div1');

oDiv.onmouseover = function() {
this.style.left = '0px';
}

oDiv.onmouseout = function() {
this.style.left = '-100px';
}

}
</script>
</head>

<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body>
</html>

取消事件冒泡实例：（点击出现下拉框）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:200px; border: 1px solid red; display: none;}
</style>
<script>
window.onload = function() {

/*
阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
*/

var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');

oBtn.onclick = function(ev) {
var ev = ev || event;

ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡

oDiv.style.display = 'block';
}

/*oBtn.onmouseover = function(ev) {
var ev = ev || event;

ev.cancelBubble = true;
}*/

document.onclick = function() {
/*setTimeout(function() {
oDiv.style.display = 'none';
}, 1000);*/

oDiv.style.display = 'none';
}

}
</script>
</head>

<body>
<input type="button" value="按钮" id="btn" />
<div id="div1"></div>

<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航