您的位置：首页 > Web前端 > JavaScript

javaScript_DOM事件类型

2015-04-04 11:49 363 查看
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级事件处理程序的方法，将鼠标移动事件以释放鼠标按钮事件注销。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航