事件
JavaScript所支持的事件绢淀，可以分為以下幾類：
- 窗口事件 (Window Events)
- 表單元素事件 (Form Element Events)
- 鍵盤事件 (Keyboard Events)
- 鼠標(biāo)事件 (Mouse Events)
鼠標(biāo)事件
鼠標(biāo)移動(dòng)到目標(biāo)元素上的那一刻氛濒，首先觸發(fā)mouseover
之后如果光標(biāo)繼續(xù)在元素上移動(dòng)闽撤，則不斷觸發(fā)mousemove
如果按下鼠標(biāo)上的設(shè)備(左鍵,右鍵,滾輪……)玛瘸，則觸發(fā)mousedown
當(dāng)設(shè)備彈起的時(shí)候觸發(fā)mouseup
目標(biāo)元素的滾動(dòng)條發(fā)生移動(dòng)時(shí)(滾動(dòng)滾輪/拖動(dòng)滾動(dòng)條演怎。嚷炉。)觸發(fā)scroll
滾動(dòng)滾輪觸發(fā)mousewheel十厢，這個(gè)要區(qū)別于scroll
鼠標(biāo)移出元素的那一刻等太，觸發(fā)mouseout
##**獲取事件對象和事件源(觸發(fā)事件的元素)
function eventHandler(e){
//獲取事件對象
e = e || window.event;//IE和Chrome下是window.event FF下是e
//獲取事件源
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target }
**取消事件默認(rèn)行為(例如點(diǎn)擊一個(gè)<a>后不跳轉(zhuǎn)頁面而是執(zhí)行一個(gè)函數(shù)) **
function eventHandler(e) {
e = e || window.event; // 防止默認(rèn)行為
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;
//IE //注意：這個(gè)地方是無法用return false代替的
//return false只能取消元素
}
}
窗口事件 (Window Events)
僅在 body 和 frameset 元素中有效。事件
說明
onload 當(dāng)網(wǎng)頁被載入時(shí)執(zhí)行腳本蛮放。
onunload 當(dāng)網(wǎng)頁被關(guān)閉時(shí)執(zhí)行腳本缩抡。
表單元素事件(Form Element Events)
僅在表單元素中有效。
onchange 當(dāng)元素（select 包颁、復(fù)選框 等）改變時(shí)執(zhí)行腳本
onsubmit 當(dāng)表單（form）被提交時(shí)執(zhí)行腳本
onreset 當(dāng)表單被重置時(shí)執(zhí)行腳本
onselect 當(dāng)元素被選取時(shí)執(zhí)行腳本
onblur 當(dāng)元素失去焦點(diǎn)時(shí)執(zhí)行腳本
onfocus 當(dāng)元素獲得焦點(diǎn)時(shí)執(zhí)行腳本
鍵盤事件Keyboard Events)/鼠標(biāo)事件 (Mouse Events)
在下列元素中無效：base瞻想、bdo、br娩嚼、frame蘑险、frameset、head岳悟、html佃迄、iframe、meta贵少、param呵俏、script、style 以及 title 元素滔灶。
事件源
事件源是指發(fā)生事件的DOM節(jié)點(diǎn)普碎。
事件源是作為event對象的屬性存在的。在W3C規(guī)范中录平，這個(gè)屬性是 target 麻车；但是 IE8.0 及其以下版本不支持該屬性，它使用 srcElement 屬性來獲取事件源萄涯。
<html>
<head>
<title>獲取鼠標(biāo)的坐標(biāo)信息</title>
</head>
<body>
<div id="demo">點(diǎn)擊這里</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>
* 分析:這種方式結(jié)構(gòu)不分離,效率低*
2 . 對象屬性方式
DomObject.onclick = function(){}
* 分析:這種方式只能綁定一個(gè)時(shí)間*
3 . addEventListener方式 （W3c中的標(biāo)準(zhǔn)）
xxxDomObject.addEventListener('click',function(){}); (移除xxxDomObject.removeEventListener("mousedown", mouse, false);)
* 注意： 1.事件名绪氛，一律不帶on (即 綁在 click，load涝影，change.. 等等）
2.綁定事件函數(shù)中的"this"指綁定該事件的對象
3.執(zhí)行順序，是按綁定的順序來的*
取消瀏覽器默認(rèn)動(dòng)作
對于遵循 W3C 規(guī)范的瀏覽器争占，使用 event 對香的 **preventDefault()** 方法來取消默認(rèn)動(dòng)作燃逻；
但是 IE8.0 及其以下版本不支持該方法序目，它通過對 event象的 **returnValue** 屬性賦值 false 來取消默認(rèn)動(dòng)作。
兼容寫法
document.getElementById("demo").onclick=function(e){
var eve = e || window.event;
try{ // 使用 try...catch 語句避免瀏覽器出現(xiàn)錯(cuò)誤提示
eve.preventDefault(); // 非 IE 瀏覽器
}catch(e){
eve.returnValue = false; // IE8.0 及其以下版本
}
}
addEventLIstenner('click',function(){},true) 第三個(gè)參數(shù) false(默認(rèn)):冒泡 true :捕獲
事件捕獲/事件冒泡
事件捕獲階段：事件從最上一級(jí)標(biāo)簽開始往下查找伯襟，直到捕獲到事件目標(biāo)(target)猿涨。
事件冒泡階段：事件從事件目標(biāo)(target)開始，往上冒泡直到頁面的最上一級(jí)標(biāo)簽姆怪。
把事件捕獲和冒泡的過程統(tǒng)稱為事件的傳播事件的傳播是可以阻止的：
? 在W3C中叛赚，使用stopPropagation()方法
? 在IE下設(shè)置cancelBubble = true;
在捕獲的過程中stopPropagation()后，后面的冒泡過程也不會(huì)發(fā)生了~
阻止事件的默認(rèn)行為稽揭，例如click 后的跳轉(zhuǎn)~
? 在W3C中俺附，使用preventDefault()方法；
? 在IE下設(shè)置window.event.returnValue = false;
注：不是所有的事件都能冒泡溪掀，例如：blur事镣、focus、load揪胃、unload璃哟，
web存儲(chǔ)sessionStorage和localStorage
sessionStorage是會(huì)話級(jí)別的存儲(chǔ)。而localStorage用于持久化的本地存儲(chǔ)喊递，除非主動(dòng)刪除數(shù)據(jù)随闪，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。
兩這個(gè)具有相同的操作方法(setItem骚勘、getItem和removeItem);
setItem存儲(chǔ)value
用途;將value 存儲(chǔ)到key字段
用法; .setItem(key,value);
sessionStorage.setItem("key","value"); localStorage.setItem("key", "value");
getItem獲取value
用途：獲取指定key本地存儲(chǔ)的值
用法：.getItem(key)
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem刪除key
用途：刪除指定key本地存儲(chǔ)的值
用法：.removeItem(key)
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
sessionStorage.clear(); localStorage.clear();
cookies
<script>
//設(shè)置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>
