事件
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
##**獲取事件對(duì)象和事件源(觸發(fā)事件的元素)
function eventHandler(e){
//獲取事件對(duì)象
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)頁(yè)面而是執(zhí)行一個(gè)函數(shù)) **
function eventHandler(e) {
e = e || window.event; // 防止默認(rèn)行為
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;
//IE //注意：這個(gè)地方是無(wú)法用return false代替的
//return false只能取消元素
}
窗口事件 (Window Events)
僅在 body 和 frameset 元素中有效欠啤。事件說(shuō)明
onload 當(dāng)網(wǎng)頁(yè)被載入時(shí)執(zhí)行腳本。
onunload 當(dāng)網(wǎng)頁(yè)被關(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)
在下列元素中無(wú)效：base共郭、bdo祠丝、br、frame落塑、frameset纽疟、head、html憾赁、iframe污朽、meta、param龙考、script蟆肆、style 以及 title 元素。
事件源
事件源是指發(fā)生事件的DOM節(jié)點(diǎn)晦款。事件源是作為event對(duì)象的屬性存在的炎功。在W3C規(guī)范中，這個(gè)屬性是 target 缓溅；但是 IE8.0 及其以下版本不支持該屬性蛇损，它使用 srcElement 屬性來(lái)獲取事件源。
<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 . 對(duì)象屬性方式
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"指綁定該事件的
對(duì)象 3.執(zhí)行順序，是按綁定的順序來(lái)的*
取消瀏覽器默認(rèn)動(dòng)作
對(duì)于遵循 W3C 規(guī)范的瀏覽器更啄，使用 event 對(duì)香的
**preventDefault()** 方法來(lái)取消默認(rèn)動(dòng)作稚疹； 但是 IE8. 及其以下版本不支持該方法，它通過對(duì) event象的 **returnValue** 屬性賦值 false 來(lái)取消默認(rèn)動(dòng)作祭务。
兼容寫法
document.getElementById("demo").onclick=function(e){
var eve = e || window.event;
try{ // 使用 try...catch 語(yǔ)句避免瀏覽器出現(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)開始义锥，往上冒泡直到頁(yè)面的最上一級(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
//設(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();
