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

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

事件的作用：

(1)各個元素之間可以借助事件來進行交互

(2)用戶和頁面之間也可以通過事件來交互

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

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

例如：

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

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

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

pss：函數(shù)執(zhí)行的順序按照綁定事件時函數(shù)的順序為準2.1HTML事件HTML事件的移除方式：

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

例如：

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

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

type:事件類型?！緵]有on！沒有on！沒有on！】

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

useCapture:是否使用捕獲機制。如果不寫，默認值為false

false:冒泡機制

true：捕獲機制

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

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

node.removeEventListener(type,外部函數(shù)名,useCapture) eg：btn.removeEventListener('click',test,true);ps：DOM2級事件中如果綁定函數(shù)為【匿名函數(shù)】則無法刪除。能夠刪除的只能是外部函數(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：第三個參數(shù)默認可以不寫，默認是false。但是如果刪除的是捕獲事件，則必須寫為true才可以。練習(xí)：通過DOM2級事件方式，給一個按鈕添加點擊事件。3.IE瀏覽器中的【事件綁定】(1)HTML事件處理程序：等同于非IE

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

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

type:事件類型?！居衞n！有on！有on！】

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

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

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

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

d1.attachEvent("onclick",test);

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

解綁事件時： 如果能采用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('點擊事件');}

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

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

鼠標抬起時觸發(fā)：mouseup鼠標移動時觸發(fā)：mousemove

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

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

node.onload=func(){};

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

window.onload=function(){

vardiv=document.querySelector(‘div’);

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

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

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

mylink.onerror=function(){

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

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

DOM文檔加載的步驟為:

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

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

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

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

加載圖片等外部文件。

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

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

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

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

console.log('width