[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移除
