触发事件 触发 bubble cti one == left black
- 事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层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>
事件冒泡 & 阻止事件冒泡
来源: http://www.bubuko.com/infodetail-2015169.html