事件冒泡
2017-09-27 15:00
274 查看
<style> div{ width: 300px; height: 300px; border: 1px solid #000000; float: left; margin: 10px 20px; } div p{ background-color: gray; color: #FFFFFF; text-align: center; height: 50px; line-height: 50px; } </style> <script> var a = 0;//声明 var b = 0; var c = 0; var d = 0; var e = 0; //鼠标移动事件 function myMove(){ a++; // a = a + 1; var font = document.getElementById("a");//获取font标签对象 font.innerHTML = a; } //鼠标移入事件over function myOver(){ b++; var font = document.getElementById("b");//获取font标签对象 font.innerHTML = b; } //鼠标移出事件out function myOut(){ c++; var font = document.getElementById("c");//获取font标签对象 font.innerHTML = c; } //鼠标移入事件enter function myEnter(){ d++; var font = document.getElementById("d");//获取font标签对象 font.innerHTML = d; } //鼠标移出事件leave function myLeave(){ e++; var font = document.getElementById("e");//获取font标签对象 font.innerHTML = e; } </script> </head> <body> <div onmousemove="myMove()"> <font id="a">0</font> <p>鼠标移动事件onmousemove</p> </div> <!--事件冒泡--> <div onmouseover="myOver()"> <font id="b" style="border: 1px solid #000000;">0</font> <p>鼠标移入事件onmouseover</p> </div> <div onmouseout="myOut()"> <font id="c">0</font> <p>鼠标移出事件onmouseout</p> </div> <div onmouseenter="myEnter()"> <font id="d">0</font> <p>鼠标移入事件onmouseenter</p> </div> <div onmouseleave="myLeave()"> <font id="e">0</font> <p>鼠标移出事件onmouseleave</p> </div> </body>
相关文章推荐
- 事件冒泡在层的展示和隐藏中的应用
- COCOS2D 事件冒泡规律 和 CCMenu一直响应事件的解决办法
- 基于mouseout和mouseover等类似事件的冒泡问题解决方法
- JavaScript事件冒泡
- JS如何防止事件冒泡
- JQuery IE下如何阻止keydown事件冒泡
- 事件冒泡详解
- 一个DOM元素绑定多个事件时,先执行冒泡还是捕获
- 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
- js 事件冒泡详解、 捕获、阻止方法
- javascript阻止事件冒泡和浏览器的默认行为
- JS中的事件冒泡问题
- 事件冒泡的应用——jq on的实现
- 取消事件冒泡
- 锋利的jQuery-4--阻止事件冒泡和阻止默认行为
- jQuery中on绑定事件后引发的事件冒泡问题如何解决
- javascript中的事件冒泡
- 解析Javascript事件冒泡机制
- 深入理解事件冒泡(Bubble)和事件捕捉(capture)
- 阻止事件冒泡和浏览器的默认行为