大家在页面上添加各种特效必不可少的运用到某些事件,比如点击onclick、经过onmouseover、离开onmouseout、移动onmousemove等,上面的为鼠标事件,还有键盘事件onkeydown,诸如此类的事件还有很多。这里我给大家介绍一点我了解的知识给大家,运用event对象和事件来处理一些事。
首先,对event对象进行兼容性处理
<script>
window.οnlοad=function ()
{
document.οnclick=function (ev)
{
//IE
//alert(event.clientX+','+event.clientY);
//非IE
//alert(ev.clientX+','+ev.clientY);
var oEvent=ev||event;
alert(oEvent.clientX+','+oEvent.clientY);
};
};
</script>
1、事件冒泡
我们通过一个例子来了解下冒泡事件
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;border: none;list-style: none;}
body{padding: 100px;}
input{width: 40px;height: 20px;background: #666;color: red;margin-bottom: 3px;border-radius: 3px;}
.box{width: 300px;height: 150px;border: 1px solid #777;display: none;}
</style>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
oBtn.οnclick=function (ev) {
if (oBox.style.display='none') {
oBox.style.display='block';
} else{
oBox.style.display='none';
}
var oEvent = ev || event;
oEvent.cancelBubble=true;</span>
}
document.οnclick=function () {
oBox.style.display='none';
}
};
</script>
</head>
<body>
<input type="button" id="btn" value="选择" />
<div class="box" id="box">
</div>
</body>
</html>
效果图
:
描述:当鼠标点击选择按钮的时候,黑色边框出现(开始隐藏),点击在边框外的空白部分黑色边框将会隐藏掉。在这里就用到了冒泡处理,看上面代码,如果不添加红色部分,我们看到的效果将是:点击按钮出现,点击空白部分消失,在点击按钮,不会出现(理想效果应该是会出现的)。这里的第二个鼠标点击事件就影响到了第一个,其实当再次点击按钮的时候边框是出现了的,但是代码运行到下面的时候有备影藏了。然后我们添加红色部分代码就会消除这个bug,着就是冒泡的一个小应用。
2、鼠标事件onmousemove
根据上面例子的学习,我制作了一个小特效,我取名为小鸡跟母鸡。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{background: red;}
div{width: 30px;height: 30px;background: cornflowerblue;position: absolute;border-radius: 15px;}
</style>
<script type="text/javascript">
function Pfag (ev) {
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
return{x: ev.clientX+scrollLeft,y: ev.clientY+scrollTop};
}
document.οnmοusemοve=function (ev) {
var oEvent = ev || event;
var aDiv = document.getElementsByTagName('div');
var oPfag =Pfag(oEvent);
for (var i=aDiv.length-1;i>0;i--) {
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
aDiv[0].style.left=oPfag.x+'px';
aDiv[0].style.top=oPfag.y+'px';
}
</script>
</head>
<body>
<div id="box"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
效果图:
描述:这个案例达到的效果就是:有很多的小圆圈会随着鼠标的位置移动而跟着移动,看起来有点像贪吃蛇,在代码部分省略了很多div,节约空间,这里运用了onmousemove事件。
3、键盘事件onkeydown
看下面个例子
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width: 150px;height: 170px;position: absolute;}
.one{width: 40px;height: 40px; margin-left: 55px;background: black;float: left;}
.two{clear: both; width: 20px;height: 10px;margin-left: 65px;background: black;float: left;}
.three{clear: both;width: 50px;height: 60px;background: black;float: left;margin-left: 50px;}
.four{clear: both;width: 15px;height: 50px;background: black;float: left;margin-left: 55px;margin-right: 10px;}
.five{width: 15px;height: 50px;background: black;float: left;}
</style>
<script type="text/javascript">
window.οnkeydοwn=function (ev) {
var oBox = document.getElementById('box');
var oEvent = ev || event;
if (oEvent.keyCode==37) {
oBox.style.left=oBox.offsetLeft-10+'px';
} if (oEvent.keyCode==39) {
oBox.style.left=oBox.offsetLeft+10+'px';
}
if (oEvent.keyCode==38) {
oBox.style.top=oBox.offsetTop-10+'px';
}
if (oEvent.keyCode==40) {
oBox.style.top=oBox.offsetTop+10+'px';
}
};
</script>
</head>
<body>
<div id="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
</body>
</html>
描述:首先获取键盘中上下左右各键的键值,左(37),上(38),右(39),下(40)。按下各方向键图形就会随着改变的方向移动。