w簡(jiǎn)書的markdown不支持[toc]? ??
不知不覺(jué)，從開始做android的項(xiàng)目后就很少寫JS了逊躁，最近項(xiàng)目中需要用到大量的H5伤锚，也來(lái)湊湊HTML5開發(fā)的熱鬧。。屯援。當(dāng)然前提要學(xué)好JS猛们，好記性不如爛筆頭，開始學(xué)著寫點(diǎn)筆記狞洋，提升學(xué)習(xí)效率~
這里只是記錄一些比較容易忘記弯淘，API之類的需要時(shí)再去查閱
[toc]
事件對(duì)象
接受對(duì)象的差異性
W3C可直接通過(guò)參數(shù)接收事件對(duì)象，而IDE自己定義了一個(gè)Event對(duì)象吉懊，通過(guò)window.event獲取庐橙。
兼容獲取事件對(duì)象的代碼
<input type="button" id="btn" value="提交"/>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(event){
var e = event || widnow.event;
alert(e);
}
</script>
鼠標(biāo)事件
鼠標(biāo)事件的兼容性問(wèn)題
onmousemove:鼠標(biāo)移動(dòng)
onmousedown：鼠標(biāo)點(diǎn)擊
onmouseup：鼠標(biāo)松開
onmouseover：鼠標(biāo)移動(dòng)到元素區(qū)域內(nèi)
onmouseout ：鼠標(biāo)移出元素
在這三個(gè)事件對(duì)象中，有一個(gè)button屬性借嗽，表示按下或者釋放的按鈕态鳖，遺忘的是對(duì)于這個(gè)button屬性，坑爹的IE也與W3C不同（怪不得你爹不要你了）
W3C中的button屬性
IE中的button屬性
可以看出恶导，IE和W3C在button屬性上各個(gè)數(shù)值所表示的按鈕和狀態(tài)都不一樣浆竭，但是一般我們只需要兼容W3C那三種就好了
兼容代碼
function getButton(evt) {
var e = evt || window.event;
if (evt) {
return e.button;
} else
if (window.event) {
switch(e.button) {
case 1 :
return 0;
case 4 :
return 1;
case 2 :
return 2;
}
}
}
document.onmouseup = function (evt) {
if (getButton(evt) == 0) {
alert('按下了左鍵!');
} else if (getButton(evt) == 1) {
alert('按下了中鍵!');
} else if (getButton(evt) == 2) {
alert('按下了右鍵!' ); }
};
鼠標(biāo)事件-可視區(qū)和坐標(biāo)的獲取
可通過(guò)clienX,screex獲取，這個(gè)就不記錄了惨寿，查一下文檔即可
鍵盤事件
onkeydown
onkeypress：只對(duì)能在屏幕上輸出字符的按鈕有效果
onkeyup
屬性：
keyCode:鍵碼---獲取一個(gè)代碼邦泄，與鍵盤特定的鍵對(duì)應(yīng)，與ASCII碼中對(duì)應(yīng)的編碼相同（不區(qū)分大小寫）
charCode：字符編碼 --- 只有在keypress中才包含值裂垦，對(duì)應(yīng)的是鍵所代碼的字符的ASCII編碼（區(qū)分大小寫）
document.onkeypress = function (event) {
alert("charCode == "+ event.charCode); //得到相應(yīng)的 charCode
};
document.onkeydown = function (event) {
alert("keyCode == "+ event.keyCode); //得到相應(yīng)的 keyCode
};
兼容性問(wèn)題：
不同瀏覽器中顺囊，獲取的keyCode(鍵碼）和charCode（字符編碼）有可能不一樣，要謹(jǐn)慎操作
事件對(duì)象的其他屬性
事件冒泡
事件流：當(dāng)幾個(gè)具有事件的元素疊在一起的時(shí)候蕉拢，那么你點(diǎn)擊一個(gè)元素后特碳，所有層疊在你點(diǎn)擊范圍內(nèi)的元素都會(huì)觸發(fā)事件。
來(lái)個(gè)簡(jiǎn)單的圖感受一下晕换。
Button午乓，紫色和藍(lán)色的DIV都具有點(diǎn)擊事件，因?yàn)锽utton在最內(nèi)層届巩，當(dāng)點(diǎn)擊button時(shí)硅瞧，click事件會(huì)從內(nèi)往外觸發(fā)----這就是事件冒泡（特征：從里往外觸發(fā)）
事件捕獲：與事件冒泡相反份乒，是從外往內(nèi)觸發(fā)
阻止冒泡
從前面的==事件的其他屬性==中看到恕汇，關(guān)于阻止事件冒泡IE和W3C有不同的屬性
IE:是通過(guò)cancelBubble = true 取消事件冒泡
W3C:調(diào)用stopProgagation()方法取消事件冒泡
阻止的兼容方法
function stopPro(event) {
var e = event || window.event;
window.event ? e.cancelBubble = true : e.stopPropagation(); }
事件的綁定
事件的綁定有兩種方式
一，傳統(tǒng)的事件綁定或辖，分為內(nèi)聯(lián)模型瘾英，腳本模型
二，DOM2級(jí)的現(xiàn)代事件綁定
傳統(tǒng)的事件綁定
內(nèi)聯(lián)模型
基本上很少用颂暇，維護(hù)起來(lái)簡(jiǎn)直想殺人缺谴。。耳鸯。
下面這兩種形式
<input value="點(diǎn)擊" id="btn" type="button" onclick="alert('aaa')">
<input value="點(diǎn)擊" id="btn" type="button" onclick="btnOnclick()">
腳本模型
即用JavaScript獲取DOM設(shè)置事件
傳統(tǒng)事件綁定的問(wèn)題
一湿蛔、多次綁定會(huì)被覆蓋
很直觀的問(wèn)題膀曾，重復(fù)綁定會(huì)覆蓋掉前面的
/*缺點(diǎn)1:綁定多次會(huì)被覆蓋 */
window.onload = function(){
alert("onload 111111");
}
window.onload = function(){
alert("onload 2222222");
}
二、this的指向問(wèn)題
var myDiv = document.getElementById("myDiv");
myDiv.onclick = toBlue;
function toBlue(){
alert(this);//第一次就是DivElement 第二次就是window了
this.className = "blue";
this.onclick = toRed;
}
function toRed(){
this.className = "red";
this.onclick = function(){
toBlue();
}
}
三阳啥、too much recursion的問(wèn)題
當(dāng)你不停的add事件時(shí)添谊，可能會(huì)報(bào)出too much recursion的錯(cuò)誤，這是因?yàn)槟惴e累了太多的保存事件察迟，太多遞歸導(dǎo)致瀏覽器卡死斩狱。
解決方法：用完的事件，立即處理掉
var myDiv = document.getElementById("myDiv");
//可以通過(guò)[]的形式獲取綁定事件
myDiv['onclick'] = function(){
alert("aaa");
};
/**
* obj : 要移出的元素
* type: 要移出的事件類型 click等
**/
function removeEvent(obj,type){
if(obj['on'+type]) obj['on'+type] = null;
}
W3C事件處理
DOM2級(jí)中扎瓶，定義了addEventListener和removeEventListener方法所踊。最后一個(gè)參數(shù) true：表示捕獲，false：表示冒泡
一概荷，解決了this的指向問(wèn)題秕岛，再也不怕too much recursion了
我們將上面this指向的代碼稍微修改一下
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener('click',toBlue);
function toBlue(){
alert(this);//都是DivElement
this.className = "blue";
this.addEventListener('click',toRed);
}
function toRed(){
this.className = "red";
myDiv.addEventListener('click',function(){
toBlue();
});
}
二，解決重復(fù)綁定覆蓋的問(wèn)題
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener('click',function(){
alert("event 11111");
})
/**
* 不再覆蓋,兩個(gè)都會(huì)執(zhí)行,共存
* */
myDiv.addEventListener('click',function(){
alert("event 222222");
})
IE的事件處理函數(shù)
IE9就全面支持W3C的事件函數(shù)了乍赫，這里就做個(gè)簡(jiǎn)單的了解
提供了兩個(gè)方法：
attachEvent()
detachEvent()
幾個(gè)不同點(diǎn)
1,IE不支持捕獲瓣蛀，只支持冒泡
2，IE不能屏蔽重復(fù)的函數(shù)
3雷厂，IE中this指向的是window對(duì)象
4惋增，之前說(shuō)到，IE在傳統(tǒng)事件中接收不到event事件對(duì)象的
但是attchEvent可以做到改鲫。诈皿。。真是讓人爪機(jī)
不想裝個(gè)IE瀏覽器像棘，這就不測(cè)試了稽亏，做個(gè)簡(jiǎn)單的記錄，方便以后用到的時(shí)候查詢
添加/刪除事件缕题，得到事件對(duì)象的兼容代碼
//添加事件兼容
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn);
} else
if (obj.attachEvent) {
obj.attachEvent('on' + type, fn); }
}
//移除事件兼容
function removeEvent(obj, type, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(type, fn);
} else if (obj.detachEvent) {
obj.detachEvent('on' + type, fn);
}
}
//得到事件目標(biāo)
function getTarget(evt) { if (evt.target) {
return evt.target;
} else if (window.event.srcElement) {
return window.event.srcElement; }
}
事件其他補(bǔ)充（主要是兼容方面）
獲取移入和移出的DOM對(duì)象的兼容問(wèn)題
W3C版：事件對(duì)象屬性:relatedTarget
IE版：fromElement 和 toElement,分別對(duì)應(yīng) mouseover 和 mouseout截歉。
不同的實(shí)現(xiàn)，又需要兼容的代碼~
function getTarget(evt) {
var e = evt || window.event;
if (e.srcElement) {//如果支持,就是IE瀏覽器(srcElement:事件目標(biāo))
if (e.type == 'mouseover') {
return e.fromElement;
} else if (e.type == 'mouseout') {
return e.toElement;}
} else if (e.relatedTarget) {
//如果支持 relatedTarget,表示 W3C ;
return e.relatedTarget;
}
}
取消事件默認(rèn)行為的兼容性問(wèn)題
場(chǎng)景：取消超鏈接的默認(rèn)行為.
解決方法一：
設(shè)置 return false烟零。
缺點(diǎn)：
1)瘪松、必須寫在最后，那么中間的代碼執(zhí)行后锨阿，
可能執(zhí)行不到return false;(例如中間報(bào)錯(cuò)了宵睦，但是頁(yè)面依舊會(huì)跳轉(zhuǎn)）
2）、如果寫在最前面墅诡，那么就無(wú)法做一些跳轉(zhuǎn)判斷了（通過(guò)一段邏輯判斷后才決定是否跳轉(zhuǎn)）
` <a id="aLink" >aaaa</a>`
var aLink = document.getElementById("aLink");
aLink.onclick = function(){
/**
*
* */
var person = function(){
}
var p = new Person();
p.show();//這里沒(méi)有show方法,報(bào)錯(cuò)了,所以后面的return false沒(méi)有執(zhí)行到,頁(yè)面依舊跳轉(zhuǎn)了
return false;
}
解決方法二：取消事件的默認(rèn)行為
W3C：event.preventDefault(); IE：window.event.returnValue = false;
頭疼壳嚎，又需要兼容。。烟馅。
兼容代碼
function preDef(event) {
var e = event || window.event;
if(e.preventDefault) {
e.preventDefault();
}else {
e.returnValue= false;
}
}
oncontextmenu事件
可用于取消右鍵事件说庭，提升瀏覽器性能
window.document.oncontextmenu = function(event){
var e = event || window.event;
if(e.preventDefault) {
e.preventDefault();
}else {
e.returnValue= false;
}
}
