节点绑定事件
一、 鼠标移上与移出事件
(1)概述
概述:任意节点(标签),都可以给它们添加鼠标移上与鼠标移下事件【onmouseenter与onmouseleave】
任意一个结点可以同时绑定多个事件
- 鼠标进入:onmouseenter 或 onmouseover
- 鼠标移出:onmouseleave 或 onmouseout
样式部分
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 400px;
height: 200px;
display: block;
margin: 100px auto;
}
</style>
</head>
<body>
<img src="img/0.jpg" id="box"/>
</body>
DOM部分
//获取节点
var img = document.getElementById('box');
//鼠标移上事件
img.onmouseenter = function(){
//修改图片地址
img.src = './img/1.jpg';
}
//鼠标移除事件
img.onmouseleave &