事件
JavaScript所支持的事件，可以分為以下幾類：
- 窗口事件 (Window Events)
- 表單元素事件 (Form Element Events)
- 鍵盤事件 (Keyboard Events)
- 鼠標事件 (Mouse Events)
鼠標事件
鼠標移動到目標元素上的那一刻，首先觸發mouseover
之后如果光標繼續在元素上移動，則不斷觸發mousemove
如果按下鼠標上的設備(左鍵,右鍵,滾輪……)，則觸發mousedown
當設備彈起的時候觸發mouseup
目標元素的滾動條發生移動時(滾動滾輪/拖動滾動條。。)觸發scroll
滾動滾輪觸發mousewheel，這個要區別于scroll
鼠標移出元素的那一刻，觸發mouseout
##**獲取事件對象和事件源(觸發事件的元素)
function eventHandler(e){
//獲取事件對象
e = e || window.event;//IE和Chrome下是window.event FF下是e
//獲取事件源
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target }
**取消事件默認行為(例如點擊一個<a>后不跳轉頁面而是執行一個函數) **
function eventHandler(e) {
e = e || window.event; // 防止默認行為
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;
//IE //注意：這個地方是無法用return false代替的
//return false只能取消元素
}
}
窗口事件 (Window Events)
僅在 body 和 frameset 元素中有效。事件
說明
onload 當網頁被載入時執行腳本。
onunload 當網頁被關閉時執行腳本。
表單元素事件(Form Element Events)
僅在表單元素中有效。
onchange 當元素（select 、復選框 等）改變時執行腳本
onsubmit 當表單（form）被提交時執行腳本
onreset 當表單被重置時執行腳本
onselect 當元素被選取時執行腳本
onblur 當元素失去焦點時執行腳本
onfocus 當元素獲得焦點時執行腳本
鍵盤事件Keyboard Events)/鼠標事件 (Mouse Events)
在下列元素中無效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
事件源
事件源是指發生事件的DOM節點。
事件源是作為event對象的屬性存在的。在W3C規范中，這個屬性是 target ；但是 IE8.0 及其以下版本不支持該屬性，它使用 srcElement 屬性來獲取事件源。
<html>
<head>
<title>獲取鼠標的坐標信息</title>
</head>
<body>
<div id="demo">點擊這里</div>
</body>
<script type="text/javascript">
document.getElementById("demo").onclick=function(e){
var eve = e || window.event;
var srcNode = eve.target || eve.srcElement; // 兼容所有瀏覽器
alert(srcNode);
}
</script>
</html>
綁定事件的方法
1 . 在DOM元素中直接綁定
<button onclick="alert('謝謝支持')">按鈕</button>
* 分析:這種方式結構不分離,效率低*
2 . 對象屬性方式
DomObject.onclick = function(){}
* 分析:這種方式只能綁定一個時間*
3 . addEventListener方式 （W3c中的標準）
xxxDomObject.addEventListener('click',function(){}); (移除xxxDomObject.removeEventListener("mousedown", mouse, false);)
* 注意： 1.事件名，一律不帶on (即 綁在 click，load，change.. 等等）
2.綁定事件函數中的"this"指綁定該事件的對象
3.執行順序，是按綁定的順序來的*
取消瀏覽器默認動作
對于遵循 W3C 規范的瀏覽器，使用 event 對香的 **preventDefault()** 方法來取消默認動作；
但是 IE8.0 及其以下版本不支持該方法，它通過對 event象的 **returnValue** 屬性賦值 false 來取消默認動作。
兼容寫法
document.getElementById("demo").onclick=function(e){
var eve = e || window.event;
try{ // 使用 try...catch 語句避免瀏覽器出現錯誤提示
eve.preventDefault(); // 非 IE 瀏覽器
}catch(e){
eve.returnValue = false; // IE8.0 及其以下版本
}
}
addEventLIstenner('click',function(){},true) 第三個參數 false(默認):冒泡 true :捕獲
事件捕獲/事件冒泡
事件捕獲階段：事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target)。
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。
把事件捕獲和冒泡的過程統稱為事件的傳播事件的傳播是可以阻止的：
? 在W3C中，使用stopPropagation()方法
? 在IE下設置cancelBubble = true;
在捕獲的過程中stopPropagation()后，后面的冒泡過程也不會發生了~
阻止事件的默認行為，例如click 后的跳轉~
? 在W3C中，使用preventDefault()方法；
? 在IE下設置window.event.returnValue = false;
注：不是所有的事件都能冒泡，例如：blur、focus、load、unload，
web存儲sessionStorage和localStorage
sessionStorage是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
兩這個具有相同的操作方法(setItem、getItem和removeItem);
setItem存儲value
用途;將value 存儲到key字段
用法; .setItem(key,value);
sessionStorage.setItem("key","value"); localStorage.setItem("key", "value");
getItem獲取value
用途：獲取指定key本地存儲的值
用法：.getItem(key)
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem刪除key
用途：刪除指定key本地存儲的值
用法：.removeItem(key)
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
sessionStorage.clear(); localStorage.clear();
cookies
<script>
//設置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//獲取cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
checkCookie();
</script>
