一、event事件對象：表示用來擷取事件的詳細資料，如：滑鼠的位置，鍵盤的按鍵。比如得到滑鼠的橫座標：事件對象.clientX。clientX是可視區座標，捲軸距離是：document.documentElement.scrollTop ie）或者 document.body.scrollTop.
由於在ie和chrome下得到的事件方法不一樣，在ie下：
<script> document.onclick = function(){ alert(event.clientX); }</script>
而在chrom下就不行了，在chrome下須要這樣：
<script> document.onclick = function(ev){ alert(ev.clientX); }</script>
所在他們的相容最簡單的寫法就是：
<script> var Oevn = ev || event;//如果ev為false表示不是在chrome下 document.onclick = function(){ alert(Oevn .clientX); }</script>
註：現在chrome高版本也直接支援event事件了。
二、事件流
例子出下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title></head><body> <div style="width:300px;height:300px;background:#00FF99; " onclick="alert(this.style.background);"> <div style="width:200px;height:200px;background:#000000;" onclick="alert(this.style.background);"> <div style="width:100px;height:100px; background:#FF0000;" onclick="alert(this.style.background);"> </div> </div> </div></body></html>
當我們點擊最大的div時，只會彈出該div的背景，但是我們當點擊最小的div時，他們會依次彈出最小，中度，最大div的背景，這種情況就是js冒泡事件。他們會依次將事件傳遞到父級中去。
js冒泡事件一般來說是給我們帶來困難而不會帶來方便，要想阻止其傳播，就用 Oevent.cancelBubble =true來搞定。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title><style>#div1 { height:100px; width:200px; background:#00FF99; display:none; }</style><script>window.onload =function (){ var butn = document.getElementById("butn1"); var div = document.getElementById("div1"); butn.onclick = function (ev){ var Oevent = ev || event; div.style.display ="block"; alert(111); Oevent.cancelBubble =true; }; document.onclick =function(){ div.style.display ="none"; alert(222); }; }; </script></head><body><input type="button" id="butn1" value="按鈕"/><div id="div1"></div></body></html>
這樣通過alert提示來得出每一步的結果，像百度的翻譯，百度個人使用者資訊等都是這原理。
三、讓一個div跟隨滑鼠移動：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title><style>#div1 { width:200px; height:200px; background:#0066FF; position:absolute;}</style><script>document. =function(ev){var Oevent = ev || event;var div1 = document.getElementById("div1");var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;div1.style.left = Oevent.clientX+"px";div1.style.top = Oevent.clientY+scrollTop+"px";}</script></head><body style="height:2000px;"><div id="div1"></div></body></html>
學完一點，總結一點
本文出自 “浪羽清風” 部落格，轉載請與作者聯絡！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
