DOM事件有很多不同类型,例如,有鼠标事件,有键盘事件。接下来通过一个实例来讲解几个常见的鼠标事件:
登录面板拖拽:
首先,创建一个简单地页面,如下:
HTML代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>登录面板拖拽</title>
<script type="text/javascript" src="js/drag.js"></script>
<style type="text/css">
#drag_div{
position:absolute;
background-color: #eeeeee;
left:500px;
top: 200px;
width: 350px;
height: 200px;
border:1px solid #eeeeee;
border-radius: 1em;
}
.head{
border-bottom: 1px solid #fff;
padding-left: 140px;
padding-top: 10px;
padding-bottom: 0px;
cursor:move;
}
.hTitle{
font-size: 24px;
}
.close{
position:relative;
}
.hClose{
position:absolute;
right: -23px;
top: -60px;
width: 46px;
height: 46px;
background:url(close.png);
text-decoration: none;
color:#000;
line-height:20px;
}
.body{
border-bottom:1px solid #fff;
}
form{
margin-top: 20px;
margin-bottom: 20px;
}
label{
display: inline-block;
text-align: right;
width: 100px;
margin-top: 10px;
}
.tInput{
margin-top: 10px;
border:1px solid #fff;
border-radius: 1em;
width: 180px;
padding:5px 5px 5px 5px;
}
.tInput:focus{
border-color: rgba(82,168,236,0.8);
box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px rgba(82,168,236,0.6);
outline: 0 none;
}
</style>
</head>
<body>
<div id="drag_div">
<div class="head">
<div class="hTitle">登录</div>
<div class="close"><a href="#" class="hClose"></a></div>
</div>
<div class="body">
<form>
<label>用户名:</label>
<input type="text" placeholder="输入用户名" class="tInput" />
<br/>
<label>密码:</label>
<input type="passward" placeholder="输入密码" class="tInput"/>
</form>
</div>
</div>
</body>
</html>
要实现当鼠标点击“登录”所在区域时,登录面板可以随着鼠标的移动在页面中移动,当鼠标按钮释放时,面板就不随鼠标移动了。
创建一个drag.js文件。首先,了解一个细节,在许多大型的网站中,许多元素通过class获取较为方便,然而getElementsByClassName()方法,在IE10之前是不支持的,所以通过封装一个函数,来实现跨浏览器通过className获取元素,代码如下:
function getElesByClass(classN,parent){
var oParent = parent?document.getElementById(parent):document;
var eles = [];
var allEles = oParent.getElementsByTagName("*");
for(var i = 0;i < allEles.length;i++){
if(allEles[i].className == classN){
eles.push(allEles[i]);
}
}
return eles;
}
下面先简单介绍三个事件:
- onmousedown:在用户按下任何鼠标按钮时触发;
- onmousemove:当鼠标指针在元素内部移动时重复的触发;
- onmouseup:当用户释放鼠标按钮时触发。
实现整个功能的js代码如下:
window.onload = function(){
var hTitle = getElesByClass("hTitle")[0];
<span style="color:#ff0000;">hTitle.onmousedown</span> = fnDown; //按下任何鼠标按钮时触发
//点击关闭按钮
var oClose = getElesByClass("hClose")[0];
var oDrag = document.getElementById("drag_div");
oClose.onclick = function(){
oDrag.style.display = "none";
}
}
function fnDown(event){ //通过鼠标按下的event对象的clientX属性和clientY属性获取鼠标光标的位置坐标
event = event || window.event; //解决浏览器兼容问题
var oDrag = document.getElementById("drag_div");
//获取鼠标按钮按下时,鼠标光标与面板左边界及上边界的距离(用光标的位置坐标减去面板与浏览器的左距离及上距离)
var disX = event.clientX - oDrag.offsetLeft;
var disY = event.clientY - oDrag.offsetTop;
//当鼠标在页面中移动时
<span style="color:#ff0000;">document.onmousemove</span> = function(event){ //鼠标移动的event对象
event = event || window.event;
//计算当鼠标移动时,面板的位置
var l = event.clientX - disX;
var t = event.clientY - disY;
//计算当前页面的宽度及高度
var winW = document.documentElement.clientWidth || document.body.clientWidth;
var winH = document.documentElement.clientHeight || document.body.clientHeight;
//通过控制面板移动的范围,是的面板不会移动到浏览器页面之外
var maxW = winW - oDrag.offsetWidth-23;
var maxH = winH - oDrag.offsetHeight;
if(l < 0){
l = 0;
}else if(l > maxW){
l = maxW;
}
if(t < 20){
t = 20;
}else if(t > maxH){
t = maxH;
}
oDrag.style.left = l + "px";
oDrag.style.top = t + "px";
}
//释放鼠标
<span style="color:#ff0000;">document.onmouseup</span> = function(){
document.onmousemove = null; //DOM0级注销事件处理程序
document.onmouseup = null;
}
}
注意:
1.将面板拖拽的步骤为以下三步:
- 在标题区域按下鼠标按钮,在这个过程中触发标题区域元素的onmousedown事件;
- 将鼠标在页面中移动,而面板跟随鼠标移动,在这个过程中触发页面document的onmousemove事件;
- 释放鼠标按钮,面板停止跟随鼠标移动,在这个过程中触发页面document的onmouseup事件。
在第二步中,需要知道,任何能够跟随鼠标移动的元素,其前提是这个元素必须有个绝对定位:position:absolute。
2.在鼠标移动过程中,通过事件对象的clientX属性及clientY属性得到鼠标光标的位置坐标,从而计算并改变面板的位置坐标,实现面板跟随鼠标移动的效果。
扩展内容:鼠标事件都是在浏览器窗口中的特定位置上发生的。而这个位置的信息保存在事件的clientX属性和clientY属性中。并且所有的浏览器都支持这两个属性。它们的值表示事件发生时鼠标指针在视口中的水平和垂直距离。不包括页面的滚动距离。
3.为了能够使得面板在移动过程中,不会超出浏览器视口范围,则可以控制面板的移动范围,来解决这一问题。而有个细节需要注意,由于表示关闭的那个元素战友一定的空间,所以在控制面板的移动范围时,要将这个元素的空间也考虑进去。
4.最后需要释放鼠标按钮,这时可以直接通过之前讲过的DOM0级事件处理程序的方法,将鼠标移动事件以释放鼠标按钮事件注销。