标签：event pre ne40 this abs pos color 对象 nload
事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制
阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
事件函数绑定：
//oDiv1.onclick = fn1; 给oDiv加点击事件，给事件绑定一个函数。
<script>
window.onload = function() {
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‘;
};
document.onclick = function() {
oDiv.style.display = ‘none‘;
}
}
</script>
=====================================================================
以下是利用事件冒泡机制的例子：
<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‘);
//只给父级div1添加事件函数，这样子级触发事件的时候也会执行父级的函数
oDiv.onmouseover = function() {
this.style.left = ‘0px‘;
}
oDiv.onmouseout = function() {
this.style.left = ‘-100px‘;
}
}
</script>
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body>
标签：event pre ne40 this abs pos color 对象 nload
原文地址：http://www.cnblogs.com/chiangyibo/p/6682040.html
