javascript事件1尚學(xué)堂百戰(zhàn)程序員-html event

HTMLevent事件課程介紹課程大綱1.事件概述2.非IE瀏覽器中的【事件綁定】3.IE瀏覽器中的【事件綁定】4.解決瀏覽器中關(guān)于【事件綁定】兼容性問(wèn)題5.鼠標(biāo)事件6.文檔事件1.事件概述1.1事件1.2事件傳播 事件：是可以被js檢測(cè)到的行為，實(shí)質(zhì)上是一種交互操作。 例如：我們可以給某按鈕添加一個(gè)【onClick點(diǎn)擊事件】，當(dāng)用戶對(duì)按鈕發(fā)生點(diǎn)擊時(shí)來(lái)觸發(fā)某個(gè)函數(shù)。

事件的作用：

(1)各個(gè)元素之間可以借助事件來(lái)進(jìn)行交互

(2)用戶和頁(yè)面之間也可以通過(guò)事件來(lái)交互

(3)后端和頁(yè)面之間也可以通過(guò)事件來(lái)交互（減緩服務(wù)器的壓力）

ps：注意：事件通常與函數(shù)配合使用，當(dāng)事件發(fā)生時(shí)函數(shù)才會(huì)執(zhí)行。1.1事件第一階段：從window對(duì)象傳導(dǎo)到目標(biāo)節(jié)點(diǎn)（上層傳到底層），稱為“捕獲階段”（capturephase）。第二階段：在目標(biāo)節(jié)點(diǎn)上觸發(fā)，稱為“目標(biāo)階段”（targetphase）。第三階段：從目標(biāo)節(jié)點(diǎn)傳導(dǎo)回window對(duì)象（從底層傳回上層），稱為“冒泡階段”（bubblingphase）。1.2事件傳播/事件傳遞/事件流一個(gè)事件發(fā)生后，會(huì)在子元素和父元素之間傳播（propagation）。這種傳播分成三個(gè)階段示意圖：w3c規(guī)定：事件冒泡+事件捕獲+事件真正的觸發(fā)者等各個(gè)分支構(gòu)成了js的事件機(jī)制。ps：如沒(méi)有特殊情況，均采用事件冒泡。練習(xí)：<divid='div1'> <divid='div2'> <divid='div3'> </div> </div></div>1.給上述模塊添加冒泡事件,點(diǎn)擊某個(gè)div的時(shí)候能夠讓事件逐級(jí)向上傳遞。用alert表示事件調(diào)用。2.給上述模塊添加捕獲事件,點(diǎn)擊某個(gè)div的時(shí)候能夠讓事件逐級(jí)向下傳遞。用alert表示事件調(diào)用。2.非IE瀏覽器中的【事件綁定】2.1HTML事件2.2DOM0級(jí)事件2.3DOM2級(jí)事件綁定操作發(fā)生在HTML代碼中的事件，稱為HTML事件。 語(yǔ)法：on+事件=‘函數(shù)();函數(shù)();函數(shù)();……‘

例如：

<divclass="d1"onclick="test1();test2()"> <divclass="d2"onclick="test2()"></div>

</div> 在上述HTML代碼中，分別給d1和d2綁定了效果不同的HTML事件。

ps：HTML事件采用冒泡機(jī)制來(lái)處理事件。即 點(diǎn)擊d2時(shí)會(huì)先執(zhí)行d2的綁定事件（即執(zhí)行test2函數(shù)）。 然后采用事件冒泡將事件傳遞給上一級(jí)DOM節(jié)點(diǎn)d1，然后d1執(zhí)行自己的綁定事件。

pss：函數(shù)執(zhí)行的順序按照綁定事件時(shí)函數(shù)的順序?yàn)闇?zhǔn)2.1HTML事件HTML事件的移除方式：

元素.setAttribute('on+事件名'，null); eg:d1.setAttribute('onclick',null);HTML事件缺陷：耦合性太強(qiáng)了，修改一處另一處也要修改。 當(dāng)函數(shù)沒(méi)有加載成功時(shí)，用戶去觸發(fā)事件，則會(huì)報(bào)錯(cuò)。練習(xí)：通過(guò)HTML事件方式，給一個(gè)按鈕添加點(diǎn)擊事件。在js腳本中，直接通過(guò)【on+事件名】方式綁定的事件稱為是DOM0級(jí)事件。 語(yǔ)法：元素.on+事件名=function(){需要執(zhí)行的語(yǔ)句;}

例如：

btn.onclick=function(){console.log(‘按鈕被點(diǎn)擊’);};ps：以冒泡機(jī)制來(lái)處理事件，不存在兼容的問(wèn)題2.2DOM0級(jí)事件DOM0級(jí)事件的移除方式：

元素.on+事件名=null; eg:btn.onclick=null;DOM0級(jí)事件缺陷： 一次只能綁定一個(gè)觸發(fā)函數(shù)。如果同時(shí)綁定多個(gè)觸發(fā)函數(shù)，則以最后一個(gè)為準(zhǔn)。 btn.onclick=function(){console.log(‘按鈕被點(diǎn)擊11111’);}; btn.onclick=function(){console.log(‘按鈕被點(diǎn)擊22222’);}; btn.onclick=function(){console.log(‘按鈕被點(diǎn)擊66666’);};點(diǎn)擊按鈕觸發(fā)函數(shù)是最后一個(gè)，輸出66666。練習(xí)：通過(guò)DOM0級(jí)事件方式，給一個(gè)按鈕添加點(diǎn)擊事件。在js腳本中，通過(guò)addEventListener函數(shù)綁定的事件稱為是DOM2級(jí)事件。 語(yǔ)法：元素.addEventListener(type,listener,useCapture)

type:事件類型?！緵](méi)有on！沒(méi)有on！沒(méi)有on！】

listener:監(jiān)聽函數(shù)，綁定的函數(shù)

useCapture:是否使用捕獲機(jī)制。如果不寫，默認(rèn)值為false

false:冒泡機(jī)制

true：捕獲機(jī)制

注意:DOM2級(jí)事件可以綁定多個(gè)函數(shù)，執(zhí)行順序按照函數(shù)書寫的順序。 例如：

btn.addEventListener('click',function(){console.log('d2');},true); btn.addEventListener('click',function(){console.log('d22');},true); 上述代碼表示給btn節(jié)點(diǎn)添加了兩個(gè)dom2級(jí)點(diǎn)擊事件。事件傳遞采用事件捕獲方式傳遞。2.3DOM2級(jí)事件DOM2級(jí)事件的移除方式：

node.removeEventListener(type,外部函數(shù)名,useCapture) eg：btn.removeEventListener('click',test,true);ps：DOM2級(jí)事件中如果綁定函數(shù)為【匿名函數(shù)】則無(wú)法刪除。能夠刪除的只能是外部函數(shù)。 //綁定匿名函數(shù)

d1.removeEventListener(‘click’,function(){console.log(‘d1’);},true);

//綁定外部函數(shù)

functiontest(){console.log('d1');}

d1.addEventListener('click',test,true);

d1.removeEventListener('click',test,true);pss：第三個(gè)參數(shù)默認(rèn)可以不寫，默認(rèn)是false。但是如果刪除的是捕獲事件，則必須寫為true才可以。練習(xí)：通過(guò)DOM2級(jí)事件方式，給一個(gè)按鈕添加點(diǎn)擊事件。3.IE瀏覽器中的【事件綁定】(1)HTML事件處理程序：等同于非IE

(2)DOM0級(jí)事件：等同于非IE

(3)DOM2級(jí)事件：在js腳本中，通過(guò)attachEvent函數(shù)綁定事件 語(yǔ)法：元素.attachEvent(type,listener)

type:事件類型。【有on！有on！有on！】

listener:監(jiān)聽函數(shù)，綁定的函數(shù)

注意:如果綁定多個(gè)函數(shù)，按照函數(shù)書寫的倒敘執(zhí)行。 例如：

btn.attachEvent("onclick",function(){alert(111);} btn.attachEvent("onclick",function(){alert(222);} 上述代碼表示給btn節(jié)點(diǎn)添加了兩個(gè)dom2級(jí)點(diǎn)擊事件。先執(zhí)行222，再執(zhí)行111。IE下DOM2級(jí)事件的移除方式：

元素.detachEvent(type,listener) eg: functiontest(){alert(111);}

d1.attachEvent("onclick",test);

d1.detachEvent('onclick',test);ps：匿名函數(shù)無(wú)法被移除。練習(xí)：在IE瀏覽器下，通過(guò)三種事件綁定方式，分別給一個(gè)按鈕添加點(diǎn)擊事件。4.解決瀏覽器中關(guān)于【事件綁定】兼容性問(wèn)題 由于【IE瀏覽器中的事件綁定】和【非IE瀏覽器中的事件綁定】方式方法都有所不同。所以單一的某種函數(shù)都不能完美解決不同瀏覽器下的方法綁定問(wèn)題。 那么我們又應(yīng)該如何面對(duì)在不同瀏覽器下【事件綁定】這個(gè)問(wèn)題的解決方案呢？ 以下為解決方案的思路。 綁定事件時(shí)： 如果能使用addEventListener方法綁定的，就采用本方法 否則采用attachEvent方法綁定

解綁事件時(shí)： 如果能采用addEventListener方法綁定的，就采用removeEventListener方法解綁 否則采用detachEvent方法解綁varEvent={

addEvent:function(ele,type,handler){ if(ele.addEventListener) {ele.addEventListener(type,handler);} elseif(ele.attachEvent) {ele.attachEvent('on'+type,handler);} else{ele['on'+type]=handler;} }, removeEvent:function(ele,type,handler){ if(ele.addEventListener) {ele.removeEventListener(type,handler);} elseif(ele.attachEvent) {ele.detachEvent('on'+type,handler);} else{ele['on'+type]=null;}

}

};functiontest(){alert('點(diǎn)擊事件');}

Event.addEvent(document.querySelector('div'),'click',test);5.鼠標(biāo)事件(1)鼠標(biāo)事件類型(2)鼠標(biāo)事件原則js鼠標(biāo)事件是指通過(guò)鼠標(biāo)一系列操作（如進(jìn)入，點(diǎn)擊等）來(lái)觸發(fā)的事件。(1)鼠標(biāo)事件類型鼠標(biāo)單擊是觸發(fā)：click

鼠標(biāo)雙擊是觸發(fā)：dblclick鼠標(biāo)按下時(shí)觸發(fā)：mousedown

鼠標(biāo)抬起時(shí)觸發(fā)：mouseup鼠標(biāo)移動(dòng)時(shí)觸發(fā)：mousemove

鼠標(biāo)移入時(shí)觸發(fā)(不冒泡)：mouseenter鼠標(biāo)移出時(shí)觸發(fā)(不冒泡)：mouseleave

鼠標(biāo)移入時(shí)觸發(fā)(冒泡)：mouseover鼠標(biāo)移出時(shí)觸發(fā)(冒泡)：mouseout語(yǔ)法：元素.on+鼠標(biāo)事件名稱=調(diào)用函數(shù)例如：d1.ondblclick=function(){console.log('這是d1');};(2)鼠標(biāo)事件原則a.鼠標(biāo)的基本事件默認(rèn)采用冒泡傳遞b.可以給一個(gè)元素添加多個(gè)不同的鼠標(biāo)事件，不同的鼠標(biāo)事件之間互不影響c.mouseenter和mouseleave兩個(gè)事件不冒泡觸發(fā)。練習(xí)1.編寫一個(gè)帶有提示文字的滾動(dòng)條2.編寫一個(gè)帶有hover樣式的導(dǎo)航欄，要求采用鼠標(biāo)事件實(shí)現(xiàn)3.編寫一個(gè)div，要求鼠標(biāo)按下不抬起時(shí)。每隔1s輸出一句'helloworld‘;4.編寫一個(gè)button。要求鼠標(biāo)點(diǎn)擊一次能夠讓頁(yè)面中的某個(gè)div向右移動(dòng)50像素。5.編寫一個(gè)div，要求當(dāng)鼠標(biāo)按下時(shí)，整個(gè)div能夠跟隨鼠標(biāo)移動(dòng)而移動(dòng)6.文檔事件(1)加載成功\失敗事件：load\error(2)當(dāng)DOM加載完成時(shí)觸發(fā)事件：DOMContentLoaded(3)文檔加載狀態(tài)判斷事件：readystatechange(4)文檔大小發(fā)生改變時(shí)的回調(diào)事件：resize 文檔事件中主要是指添加給整個(gè)文檔的事件。在這一類事件中，絕大部分并不需要用戶主動(dòng)去進(jìn)行調(diào)用。而是通過(guò)文檔的不同狀態(tài)來(lái)進(jìn)行自動(dòng)執(zhí)行。 load事件指的是：節(jié)點(diǎn)加載成功時(shí)自動(dòng)發(fā)生回調(diào)事件 error事件值得是：節(jié)點(diǎn)加載失敗時(shí)自動(dòng)發(fā)生的回調(diào)事件 語(yǔ)法：

node.onload=func(){};

例如： 在head中為頁(yè)面元素添加點(diǎn)擊事件，通過(guò)文檔的onload事件解決了 【因網(wǎng)頁(yè)加載未完成，而導(dǎo)致的獲取頁(yè)面元素失敗】的問(wèn)題

window.onload=function(){

vardiv=document.querySelector(‘div’);

div.onclick=function(){console.log('點(diǎn)擊事件');};

}(1)加載成功\失敗事件：load\error元素加載失敗時(shí)觸發(fā)的操作，只需要給指定元素一個(gè).onerror屬性即可

varmylink=document.getElementsByTagName(“l(fā)ink”).item(0);

mylink.onerror=function(){

console.log('css文件加載出問(wèn)題了');

}; DOMContentLoaded事件和load事件的區(qū)別是觸發(fā)的時(shí)機(jī)不一樣，先觸發(fā)DOMContentLoaded事件，后觸發(fā)load事件。

DOM文檔加載的步驟為:

解析HTML結(jié)構(gòu)。

加載外部腳本和樣式表文件。

解析并執(zhí)行腳本代碼。

DOM樹構(gòu)建完成。 //DOMContentLoaded執(zhí)行

加載圖片等外部文件。

頁(yè)面加載完畢。 //load執(zhí)行

因此樣式文件的加載會(huì)阻塞腳本的執(zhí)行。 所以如果你把一個(gè)內(nèi)部腳本<script>元素放在了一個(gè)<link>后面，如果頁(yè)面沒(méi)有完成解析則腳本不會(huì)觸發(fā)，直到樣式文件加載完成之后.(這種情況被稱為文件阻塞)

(2)當(dāng)DOM加載完成時(shí)觸發(fā)事件：DOMContentLoaded 當(dāng)document的readyState改變時(shí)觸發(fā)這個(gè)事件(僅第二階段)。 眾所周知，document節(jié)點(diǎn)中擁有一個(gè)屬性叫做readyState。其擁有三個(gè)可能值： loading：加載DOM中 interactive：加載外部資源 complete：加載完成 而readystatechange事件正是在這個(gè)狀態(tài)發(fā)生改變時(shí)調(diào)用的事件。

調(diào)用方式可以用DOM0也可以用DOM2來(lái)綁定。(4)文檔加載狀態(tài)判斷事件：readystatechangewindow.onresize=function(){

console.log('width