一.事件處理模型
當(dāng)一個(gè)dom節(jié)點(diǎn)觸發(fā)事件后愚战，該事件會(huì)按照HTML結(jié)構(gòu)在根節(jié)點(diǎn)和這個(gè)元素節(jié)點(diǎn)之間傳播，路徑上所有的節(jié)點(diǎn)都會(huì)收到該事件
1. 什么是事件處理模型
事件流就是當(dāng)你單擊了某個(gè)元素拌倍，單擊事件不僅僅發(fā)生在這個(gè)元素上，你也單擊了它的父元素刚梭、父元素的父元素今阳、……它的祖先元素，甚至單擊了整個(gè)頁(yè)面逊躁。
“事件流”描述的是頁(yè)面上各個(gè)元素接收事件的順序似踱。
我們?yōu)榱嗣枋鍪录膫鞑ロ樞颍匾馊藶橐?guī)定了兩個(gè)階段：捕獲階段稽煤、冒泡階段核芽。點(diǎn)擊頁(yè)面上的一個(gè)元素，事件在哪個(gè)階段觸發(fā)念脯，這取決于添加事件監(jiān)聽(tīng)的方法。
2. DOM 0級(jí)事件綁定
我們之前學(xué)習(xí)的
oDiv.onclick = function(){
}
這種注冊(cè)監(jiān)聽(tīng)的寫(xiě)法弯淘，就是DOM0級(jí)的事件綁定方法绿店。就是把onclick當(dāng)做屬性添加給了oDiv元素。
通過(guò)實(shí)驗(yàn)，我們發(fā)現(xiàn)假勿，這種事件添加方法借嗽，只能監(jiān)聽(tīng)冒泡過(guò)程。事件的捕獲階段转培，沒(méi)有監(jiān)聽(tīng)成功恶导。
這里需要注意，在IE 9浸须、Chrome里面惨寿，事件會(huì)冒泡到window對(duì)象，而IE 6删窒、7裂垦、8僅僅冒泡到document對(duì)象。
另外肌索，用這種方法綁定的監(jiān)聽(tīng)蕉拢，this指的是觸發(fā)這個(gè)事件的元素，沒(méi)有任何的瀏覽器兼容問(wèn)題诚亚。
注意: DOM0級(jí)還有一種寫(xiě)法晕换，直接將監(jiān)聽(tīng)寫(xiě)在標(biāo)簽里面，工作中基本用：
<div id="box1" onclick="alert('我是box1');"> <div id="box2" onclick="alert('我是box2');"> <div id="box3" onclick="alert('我是box3');"> </div> </div> </div>
寫(xiě)在HTML標(biāo)簽里面代碼耦合性很強(qiáng)站宗，三層沒(méi)有完全分離闸准，工作中不用的。這種寫(xiě)法份乒，也是監(jiān)聽(tīng)冒泡階段恕汇。
3.DOM 2級(jí)事件綁定
DOM 2事件綁定是通過(guò)新增的 addEventListener ()來(lái)監(jiān)聽(tīng)事件
oBox.addEventListener("click",function(){
},false);
第1個(gè)參數(shù)：事件名不用寫(xiě)on， click或辖、mouseover 瘾英、mouseout
第2個(gè)參數(shù)：函數(shù)可以是匿名函數(shù)，也可以是有名函數(shù)
第3個(gè)參數(shù)：布爾值颂暇，true表示監(jiān)聽(tīng)捕獲缺谴、false表示監(jiān)聽(tīng)冒泡階段
比如:
box1.addEventListener("click", function(){
alert("box1被點(diǎn)擊，捕獲階段");
}, true)
第三個(gè)參數(shù)是true耳鸯，表示監(jiān)聽(tīng)box1的捕獲階段的單擊事件湿蛔。
小題目
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
對(duì)應(yīng)的js
box2.addEventListener("click", function(){
alert(1);
}, true); //捕獲階段
box1.onclick = function(){
alert(2); //冒泡階段
}
box2.addEventListener("click",function(){
alert(3);
},false); //冒泡階段
彈出順序1、3县爬、2.
4. 低版本IE的事件綁定
IE6阳啥、7、8不支持addEventListener()方法财喳，
oDiv.attachEvent("onclick",函數(shù))
沒(méi)有第三個(gè)參數(shù)察迟，也就是說(shuō)斩狱，不能選擇監(jiān)聽(tīng)捕獲、冒泡扎瓶。只能監(jiān)聽(tīng)冒泡所踊。
box1.attachEvent("onclick", function(){
alert("box1");
});
第一個(gè)參數(shù)，必須寫(xiě)on概荷，和addEventListener()不一樣秕岛；
第二個(gè)參數(shù)，就是事件處理函數(shù)
沒(méi)有第三個(gè)參數(shù)误证，只能監(jiān)聽(tīng)冒泡继薛。所以和on***寫(xiě)法一樣。
事件流永遠(yuǎn)是先下后上雷厂，先捕獲后冒泡惋增。但是不同的添加監(jiān)聽(tīng)的方式，決定了能夠監(jiān)聽(tīng)那一部分改鲫。
總結(jié)
DOM 0級(jí)的方式诈皿，只能監(jiān)聽(tīng)冒泡階段。不能有同名的事件像棘，會(huì)覆蓋稽亏。
this是觸發(fā)事件的這個(gè)元素。
高版本瀏覽器會(huì)冒泡到window缕题，
低版本瀏覽器冒泡到document截歉。
DOM 2級(jí)的方法，
addEventListener()烟零，
- 可以自由設(shè)置冒泡瘪松、捕獲。第三個(gè)參數(shù): true就是捕獲锨阿，false就是冒泡宵睦。
- 事件名不加on，可以有同名事件墅诡，會(huì)順序執(zhí)行壳嚎，不覆蓋。
- this是觸發(fā)事件的這個(gè)元素末早。
- 事件會(huì)冒泡到window烟馅。
IE 6、7然磷、8是自己的方法郑趁，
attachEvent()，
- 只能監(jiān)聽(tīng)冒泡階段姿搜。沒(méi)有第三個(gè)參數(shù)寡润。
- 事件名寫(xiě)on缺脉。可以有同名事件悦穿，會(huì)反著執(zhí)行（事件棧）。
- this很蛋疼业踢，是window而不是觸發(fā)事件的這個(gè)元素栗柒。
- 事件僅僅冒泡到document。
<span style='color:red;'>面試意義大于實(shí)際意義知举。</span>
三. 事件對(duì)象
任何的事件處理函數(shù)瞬沦，我們的瀏覽器、JS引擎會(huì)默認(rèn)往里面?zhèn)饕粋€(gè)實(shí)參雇锡，就是事件對(duì)象逛钻。
通常用形參event來(lái)接收：
oDiv.onclick = function(event){
console.log(event);
}
瀏覽器在調(diào)用這個(gè)事件處理函數(shù)，調(diào)用的時(shí)候還傳進(jìn)去一個(gè)實(shí)際參數(shù)
這個(gè)參數(shù)是一個(gè)對(duì)象锰提，表示這次點(diǎn)擊事件的所有細(xì)節(jié)曙痘。比如按的什么按鈕、點(diǎn)擊的位置等等立肘。
所有這次事件的細(xì)節(jié)边坤，都被封裝到了這個(gè)event對(duì)象里面。
比如獲取鼠標(biāo)當(dāng)前位置
document.onmousemove = function(event){
h1.innerHTML = "當(dāng)前鼠標(biāo)坐標(biāo)為" + event.clientX + "," + event.clientY;
}
event.clientX表示觸發(fā)事件的時(shí)候谅年，鼠標(biāo)的x位置（相對(duì)于視口）
不同的事件茧痒，就有不同的event值∪邗澹可以想象到鍵盤(pán)事件旺订，沒(méi)有鼠標(biāo)的位置。
1. 通用事件對(duì)象屬性和方法
event.type 返回事件的類(lèi)型超燃，沒(méi)有on区拳， 比如”click”
event.target 返回你點(diǎn)擊的最小的那個(gè)元素，即使這個(gè)元素身上沒(méi)有監(jiān)聽(tīng)淋纲，也是返回它
event.currentTarget 返回自己劳闹，this一定和event.currentTarget是一個(gè)元素，都是
event.button 區(qū)分左鍵,中間,右鍵
-
阻止事件流
stopPropagation()停止傳播事件流event.stopPropagation();
-
阻止默認(rèn)事件
右鍵出菜單 圖片拖動(dòng) a標(biāo)簽跳轉(zhuǎn) 表單提交這些網(wǎng)頁(yè)的默認(rèn)事件
preventDefault()阻止默認(rèn)事件event.preventDefault();
2. 事件對(duì)象上儲(chǔ)存的常用信息
clientX/clientY 鼠標(biāo)距離瀏覽器左上角的水平/豎直距離
pageX/pageY 鼠標(biāo)距離頁(yè)面左上角的水平/豎直距離
offsetX/offsetY 鼠標(biāo)距離觸發(fā)事件的元素左上角的水平/豎直距離
layerX/layerY 鼠標(biāo)距離最近定位父級(jí)元素左上角的水平/豎直距離
screenX/screenY 鼠標(biāo)距離計(jì)算機(jī)屏幕左上角的水平/豎直距離
3. IE6洽瞬、7本涕、8的兼容問(wèn)題
超級(jí)兼容大坑：在調(diào)用事件處理函數(shù)的時(shí)候，高級(jí)瀏覽器是傳給這個(gè)事件處理函數(shù)一個(gè)實(shí)際參數(shù)event對(duì)象伙窃。但是IE6菩颖、7、8是給window對(duì)象綁定一個(gè)當(dāng)前的event屬性为障。
IE中的鼠標(biāo)位置
document.onmousemove = function(){
h1.innerHTML = "當(dāng)前鼠標(biāo)坐標(biāo)為" + window.event.clientX + "," + window.event.clientY;
}
3.1 IE 事件對(duì)象兼容方法
//在頁(yè)面上鼠標(biāo)移動(dòng)的時(shí)候晦闰，觸發(fā)事件
document.onmousemove = function(event){
event = event || window.event;
h1.innerHTML = "當(dāng)前鼠標(biāo)坐標(biāo)為" + event.clientX + "," + event.clientY;
}
|| 就是或邏輯短路運(yùn)算符放祟，如果event有定義，那么就event對(duì)象呻右；否則就是window.event對(duì)象跪妥。
3.2 IE 事件對(duì)象中的不兼容的方法
-
阻止默認(rèn)事件
-
主流瀏覽器
event.preventDefault(); -
在IE中是一個(gè)屬性：
event.returnValue = false; -
這些的兼容性問(wèn)題，就用能力檢測(cè)來(lái)解決：
//阻止默認(rèn)的滾動(dòng)事件声滥，阻止的方法有瀏覽器兼容問(wèn)題： if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; }
-
-
阻止事件冒泡
-
主流瀏覽器
event.stopPropagation() -
在IE中是一個(gè)屬性：
event.cancelBubble=true; -
這些的兼容性問(wèn)題眉撵，就用能力檢測(cè)來(lái)解決：
if(event.stopPropagation){ event.stopPropagation() }else{ event.cancelBubble=true; }
-
-
事件源兼容
-
主流瀏覽器
event.target -
在IE中是一個(gè)屬性：
event.srcElement; -
這些的兼容性問(wèn)題，就用短路語(yǔ)法：
var targetElem = event.target || event.srcElement;
-
- 總結(jié)IE 6落塑、7纽疟、8中不支持方法，我們要記住這三個(gè)：
event.preventDefault()不兼容憾赁！ 在IE 6污朽、7、8中用event.returnValue=false;代替
event.stopPropagation()不兼容龙考！在IE 6蟆肆、7、8中用event.cancelBubble=true;代替
event.target不兼容晦款，在IE 6颓芭、7、8中用event.srcElement代替
4. 什么是事件委托
利用事件冒泡的原理把子級(jí)的事件委托給祖先元素
優(yōu)點(diǎn):
不需要循環(huán)綁定每個(gè)子元素柬赐，可以節(jié)約瀏覽器性能
添加新的子元素時(shí)亡问，不需要再給新元素綁定事件
四.滾輪事件
1. 滾輪事件及方向值
1.1 滾輪事件
滾輪事件就是鼠標(biāo)滾動(dòng)的時(shí)候觸發(fā)，
oDiv.onmousewheel = function(event){
oDiv.innerHTML = event.wheelDelta;
}
onmousewheel就是鼠標(biāo)滾動(dòng)事件肛宋，mouse鼠標(biāo)州藕，wheel就是輪子。
1.2 滾輪方向值
event參數(shù)最最重要的事就event.wheelDelta屬性酝陈，表示滾動(dòng)的方向床玻。這是瀏覽器的規(guī)定：
鼠標(biāo)往上滾， 120
鼠標(biāo)往下滾沉帮， -120
如果滾動(dòng)快速锈死，可能出現(xiàn)120的整數(shù)倍，正負(fù)性是一樣的穆壕。
onmousewheel事件的觸發(fā)待牵，是滾輪滾動(dòng)一“咯噔”觸發(fā)一次。
{passive: false}
2. 火狐瀏覽器不兼容
2.1 獲取的滾輪事件
火狐使用自己的專(zhuān)用事件DOMMouseScroll喇勋，并且這個(gè)事件只能通過(guò)標(biāo)準(zhǔn)的DOM2級(jí)的事件綁定方式添加缨该。
oDiv.addEventListener("DOMMouseScroll",function(event){
oDiv.innerHTML = event.detail;
},false);
2.2 火狐的滾輪方向值
火狐表示滾動(dòng)方向的事件的屬性叫做event.detail。
detail就是細(xì)節(jié)的意思川背。
注意:火狐滾輪方向值和其他的不一樣,并且反著的
滾動(dòng)方向往上贰拿，-3蛤袒；
滾動(dòng)方向往下，3
3.兼容性封裝
當(dāng)我們給Chrome或者IE添加一個(gè)DOMMouseScroll事件的時(shí)候膨更，會(huì)靜默妙真，不會(huì)報(bào)錯(cuò)。
function mousewheelhandler(event){
event = event || window.event; //→ 解決IE6荚守、7隐孽、8和高級(jí)瀏覽器的不兼容
//Chrome、IE用的是event.wheelDelta;
if(event.wheelDelta){ //→ 解決火狐和其他瀏覽器的不兼容
var direction = event.wheelDelta > 0 ? 1 : -1;
}else if(event.detail){
//火狐用的是event.detail;
var direction = event.detail > 0 ? -1 : 1;
}
console.log( direction);
}
這個(gè)事件處理程序中健蕊，已經(jīng)屏蔽不兼容。
//給IE踢俄、Chrome添加事件
oDiv.onmousewheel = mousewheelhandler;
//給火狐添加事件
oDiv.addEventListener("DOMMouseScroll",mousewheelhandler,false);
例子:
/*
ie/chrome : onmousewheel
event.wheelDelta
上：120
下：-120
firefox : DOMMouseScroll 必須用addEventListener
event.detail
上：-3
下：3
return false阻止的是 obj.on事件名稱(chēng)=fn 所觸發(fā)的默認(rèn)行為
addEventListener綁定的事件需要通過(guò)event下面的preventDefault();
*/
var oBox = document.getElementById('box');
oBox.onmousewheel = fn;
if(oBox.addEventListener){
oBox.addEventListener('DOMMouseScroll',fn,false);
}
function fn (e){
e = e || window.event;
// console.log(1)
// console.log(e.wheelDelta)
// console.log(e.detail)
var direction
if(e.wheelDelta){ //→ 解決火狐和其他瀏覽器的不兼容
direction = e.wheelDelta > 0 ? 1 : -1;
}else if(e.detail){
//火狐用的是event.detail;
direction = e.detail > 0 ? -1 : 1;
}
this.style.height = this.offsetHeight - (direction * 10) + 'px';
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
五. 鍵盤(pán)事件
1. onkeydown 鍵盤(pán)按下
當(dāng)鍵盤(pán)按下時(shí)觸發(fā)的事件
oInp.onkeydown = function(){
console.log(1)
}
2. onkeyup 鍵盤(pán)抬起
當(dāng)鍵盤(pán)抬起時(shí)觸發(fā)的事件
oInp.onkeyup = function(){
console.log(1)
}
3. onkeypress 鍵盤(pán)按下
鍵盤(pán)按下觸發(fā),和onkeydown相似,
onkeypress不是按下所有鍵都觸發(fā),功能鍵觸發(fā),
onkeydown是鍵盤(pán)上所有按鍵都會(huì)觸發(fā)
oInp.onkeypress = function(){
console.log(1)
}
4. 常用功能鍵
ctrlKey shiftKey altKey
對(duì)應(yīng)的keyCode為17,16,19
如果功能鍵被按下了就是true,沒(méi)按下就是false
box.onkeydown= function(e){
console.log(e.altKey); //返回布爾值
}
Enter 鍵對(duì)應(yīng)的keyCode 為13
左上右下鍵 對(duì)應(yīng)的keyCode 為37,38,39,40
5 例子
5.1 留言功能
oInp.onkeyup = function(e){
e = e || window.event;
if(this.value != ''){
console.log(e.keyCode)
if(e.keyCode == 13 && e.ctrlKey){
var oLi = document.createElement('li');
oLi.innerHTML = this.value;
if(oUl.children[0]){
oUl.insertBefore(oLi,oUl.children[0])
}else{
oUl.appendChild(oLi)
}
}
}
}
5.2 方向鍵移動(dòng)
var oBox = document.getElementById('box');
document.onkeydown = function(e){
e = e || window.event;
switch(e.keyCode){
case 37:
oBox.style.left = oBox.offsetLeft - 10 + 'px';
break;
case 38:
oBox.style.top = oBox.offsetTop - 10 + 'px';
break;
case 39:
oBox.style.left = oBox.offsetLeft + 10 + 'px';
break;
case 40:
oBox.style.top = oBox.offsetTop + 10 + 'px';
break;
}
}
五.捕獲錯(cuò)誤
try{……}catch(ex){}
try表示嘗試缩功，里面的語(yǔ)句可能有錯(cuò)誤，catch(ex)參數(shù)ex就是try語(yǔ)句段里面出現(xiàn)的錯(cuò)誤都办。在catch里面進(jìn)行了一個(gè)捕獲嫡锌，可以把錯(cuò)誤控制在這個(gè)catch語(yǔ)句塊里，而不向?yàn)g覽器拋出琳钉。
try{
console.log("123");
var a = b; //這行語(yǔ)句有錯(cuò)誤势木，b沒(méi)有被定義
console.log("哈哈");
}catch(err){
}
console.log("456");
程序的執(zhí)行邏輯是這樣的： 運(yùn)行try語(yǔ)句塊里面的語(yǔ)句，如果遇見(jiàn)了錯(cuò)誤的語(yǔ)句歌懒，不向?yàn)g覽器拋出錯(cuò)誤啦桌。而是執(zhí)行catch語(yǔ)句段里的語(yǔ)句。try語(yǔ)句里面沒(méi)有執(zhí)行完的語(yǔ)句及皂，不執(zhí)行了甫男。catch語(yǔ)句塊執(zhí)行完畢之后，執(zhí)行后面的語(yǔ)句验烧。
