js常用的几个事件
2016-11-29 11:45
260 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
#myDiv {width: 200px;height: 200px;background: red;}
#my {width: 200px;height: 200px;background: yellow;}
#Div {width: 200px;height: 200px;background: green;}
#mydiv {width: 200px;height: 200px;background: gray;}
</style>
</head>
<body>
<div id="myDiv">
1.鼠标事件中的mouseover和mouseout：event.relatedTarget.tagName 返回目标相关的节点
</div>
<hr/>
<div id="my">
2. 鼠标事件中的按键事件：0:鼠标左键 1.鼠标中间的按钮 2.鼠标右边的按钮
</div>
<hr/>
<div id="Div">
3. 鼠标事件中的滚轮
</div>
<hr/>
<div id="mydiv">
4.FireFox鼠标事件中的鼠标滚动事件
</div>
<script type="text/javascript">
var div = document.getElementById("myDiv");
div.addEventListener('mouseover',function(event){
alert("Mouse comes form"+event.relatedTarget.tagName);
},false);
var div = document.getElementById("myDiv");
div.addEventListener('mouseout',function(event){
alert('Mouse moves to'+event.relatedTarget.tagName);
},false);
</script>
<script type="text/javascript">
var div = document.getElementById("my");
div.addEventListener('mousedown',function(event){
alert(event.button);
},false);
</script>
<script>
var div = document.getElementById("Div");
div.addEventListener('mousewheel',function(event){
alert(event.wheelDelta);
},false);
</script>
<script>
var div = document.getElementById("mydiv");
div.addEventListener('DOMMouseScroll',function(event){
alert(event.detail); //-3或是3
},false);
</script>
</body>
</html>
来自：http://www.qdfuns.com/notes/25704/28e19461d7bf110cb29901a900844876.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐