javascript学习日记之事件
[TOC]
什么是事件？
事件就是javascript与HTML文档之间的交互比如你点击某个按钮就是个事件 你提交某个表单也是个事件。
事件流
事件流描述的是页面中接收事件的顺序。比如打个比方 你画了一组同心圆 你手指放在圆心 上，那么你手指指的就是所有的圆，并不是某一个圆。
事件冒泡
事件冒泡是有IE提出的事件流，意思是从事件最开始的某具体元素接收，向上传播到文档
<!DOCTYPE html>
<html>
<head>
<title>事件流</title>
</head>
<body>
<div id="Mydiv">点击</div>>
</body>
</html>
那么点击div事件传播顺序就是
div
body
html
document
事件捕获
事件捕获正好与之相反，是由事件最顶层document接收事件。具体的事件最后接收 比如上个例子 事件捕获的过程
document
html
body
div
事件对象
在触发某个事件时，就会产生一个事件对象（event），该对象包含事件相关信息 比如 鼠标点击事件点了哪里 键盘事件按了哪个键 等等 因为浏览器兼容问题
一般件事件对象常用声明方法
var myevent = ev||event
阻止事件冒泡?
e.cancelBubble=true;
e.stopPropagation();
return false; //阻止默认行为
取消事件冒泡小例子
比如我们点击按钮出现一个div 然后点击旁边时 取消div
html 代码
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
<style type="text/css">
#mydiv{width: 100px; height: 200px;background:black; display: none;}
</style>
</head>
<body>
<input id="mybutton" type="button" value="显示"/>
<div id ="mydiv"></div>
</body>
</html>
javascript代码
window.onload = function (){
var mybutton = document.getElementById("mybutton");
var mydiv = document.getElementById("mydiv");
mybutton.onclick=function (ev)
{
var oEvent=ev||event;
mydiv.style.display='block';
oEvent.cancelBubble=true;
};
document.onclick=function ()
{
mydiv.style.display='none';
};
}
单个DIV跟随鼠标
因为事件对象可以提供很多信息 所以我们可以做些好玩的东西 。
让DIV跟随鼠标走 其实很简单就是让clientX等于div的left clientY等于div的top
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>鼠标跟随div</title>
<style >
#mydiv {width: 100px;
height: 100px; background: yellow; position: absolute;}
</style>
<script>
document.onmousemove = function(ev){
var myevent = ev||event;
var mydiv = document.getElementById('mydiv');
mydiv.style.left = myevent.clientX+'px';
mydiv.style.top =myevent.clientY+'px';
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
当然这段代码还是有问题 当页面出现滚动条（页面高度很高时） div就偏离鼠标 怎么解决呢其实呢也
很简单就是让可视区的高度加上滚动的高度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>鼠标跟随div2</title>
<style >
#mydiv {width: 100px;
height: 100px; background: yellow; position: absolute;}
</style>
<script>
document.onmousemove = function(ev){
var myevent = ev||event;
var mydiv = document.getElementById('mydiv');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
mydiv.style.left = myevent.clientX+scrollLeft+'px';
mydiv.style.top =myevent.clientY+scrollTop+'px';
}
</script>
</head>
<body style="height:2000px;">
<div id="mydiv"></div>
</body>
</html>
多个DIV跟随鼠标走
之前一个div 跟随鼠标走 现在我们一串div跟随鼠标走
就像老鹰捉小鸡那样 其实呢原理就是最后一个div的left 等于最后第二个div的left 因为后面的一个div要跟着前面一个div走
js代码
window.onload=function ()
{
var myDiv=document.getElementsByTagName('div');
var i=0;
document.onmousemove=function (ev)
{
var myEvent=ev||event;
for(i=myDiv.length-1;i>0;i--)
{
myDiv[i].style.left=myDiv[i-1].style.left;
myDiv[i].style.top=myDiv[i-1].style.top;
}
myDiv[0].style.left=myEvent.clientX+'px';
myDiv[0].style.top=myEvent.clientY+'px';
};
};
简单的拖拽DIV
拖拽我们首先 要几个事件函数
第一个鼠标按住 然后 第二个鼠标移动
第三个鼠标停止 移动消失
事件想好了 现在问题是如何获得拖拽后的距离
如图所示 假设图中小方块 就是div 圆圈就是鼠标按下的地方
图中 x 和 Y 是不变得 所以可以根据X y 值求出拖拽的div 的位置
那么x和y值 怎么求出呢？ 其实x值等于clientX 减去 div物体的offsetleft 就可以求出 同理y也一样 而 拖拽后的距离就等于clienX减去x的值 。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
#mydiv {width:100px; height:100px; background:black; position:absolute;}
</style>
<script>
window.onload=function ()
{
var Div=document.getElementById('mydiv');
var X=0;
var Y=0;
Div.onmousedown=function (ev)
{
var myEvent=ev||event;
X=myEvent.clientX-Div.offsetLeft; //x的值
Y=myEvent.clientY-Div.offsetTop; //Y的值
document.onmousemove=function (ev) //移动
{
var myEvent=ev||event;
Div.style.left=myEvent.clientX-X+'px';
Div.style.top=myEvent.clientY-Y+'px';
};
document.onmouseup =function (){
document.onmousemove =null;
document.onmouseup = null;
} //停止之后移除鼠标移动事件
};
};
</script>
<title>拖拽</title>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
这里还有个细节 就是我是在document上加的鼠标移动 和停止事件 不是我写错了 是以防 div拖出窗口之外 当然移除也要在document移除
