DOM 事件

特點：

DOM0級事件無法給一個事件添加多個處理函數(shù)

var dom = document.getElementById("id"); dom.addEventListener('click', a, false); function a() { alert(this.id);//id // this代表的是dom對象 } //移除事件 //傳入的三個參數(shù)與添加事件完全相同。 dom.removeEventListener(('click', a, false)).

參數(shù)說明：

第一個參數(shù)是事件名，就是事件屬性去掉on，

第二個參數(shù)是事件處理函數(shù)，

第三個參數(shù)是是否在事件捕獲階段執(zhí)行。

特點

同一個事件處理函數(shù)可以綁定2次,一次用于事件捕獲，一次用于事件冒泡。

var dom = document.getElementById("outestA"); dom.addEventListener('click', a, false); dom.addEventListener('click', a, true); function a() { alert(this.id);//outestA }

如果綁定的是同一個事件處理函數(shù)，并且都是事件冒泡類型或者事件捕獲類型，那么只能綁定一次，多次綁定僅調用一次。

可以綁定多個不同的事件處理函數(shù)

舊版本IE瀏覽器（IE8及一下）

需要使用attachEvent和detachEvent來添加和移除事件,傳入兩個參數(shù)第一個是事件屬性（包含on），第二個是處理函數(shù)，不支持事件捕獲所以沒有第三個參數(shù)。

var dom = document.getElementById("id"); dom.attachEvent('onclick',a); function a() { alert(this.id);/**/undefined** // 這里的this是window對象 }

DOM3級事件就是在DOM2基礎上增加了更多的事件類型

UI事件，當用戶與頁面上的元素交互時觸發(fā)，如：load、scroll

焦點事件，當元素獲得或失去焦點時觸發(fā)，如：blur、focus

鼠標事件，當用戶通過鼠標在頁面執(zhí)行操作時觸發(fā)如：dbclick、mouseup

滾輪事件，當使用鼠標滾輪或類似設備時觸發(fā)，如：mousewheel

文本事件，當在文檔中輸入文本時觸發(fā)，如：textInput

鍵盤事件，當用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)，如：keydown、keypress

合成事件，當為IME（輸入法編輯器）輸入字符時觸發(fā)，如：compositionstart

變動事件，當?shù)讓覦OM結構發(fā)生變化時觸發(fā)，如：DOMsubtreeModified

注:DOM1標準中并沒有定義事件相關的內容*

事件冒泡

事件捕獲

有以下HTML結構

事件捕獲：window -> document -> html -> body -> div -> span -> 目標

事件冒泡：目標 -> span -> div -> body -> html -> document -> window

(function(){ var child = document.getElementById('child'); child.addEventListener('click', function(click){ console.log('child'); } ,flase);//false或者不寫，都是冒泡。 var parent = document.getElementById('parent'); parent.addEventListener('click', function(click){ console.log('parent'); } ,false); }());

出現(xiàn)的情況：

點擊child元素，先打印child后打印parent；

點擊parent元素，只打印parent。

(function(){ var child = document.getElementById('child'); child.addEventListener('click', function(click){ console.log('child'); } ,true); var parent = document.getElementById('parent'); parent.addEventListener('click', function(click){ console.log('parent'); } ,true); }());

出現(xiàn)的情況：

點擊child元素，先打印parent后打印child。

點擊parent元素，只打印parent。

注：事件默認的處理階段為冒泡階段，可以把addEventListener第三個參數(shù)設置為true來讓時間在捕獲階段被處理，

事件處理函數(shù)會回調一個參數(shù)event，代表當前事件對象。

event中常用的方法和屬性：

preventDefault 阻止默認行為，比如當點擊submit按鈕時候，可以采用此方法阻止表單提交。

stopPropagation 停止事件冒泡，需要防止事件冒泡帶來的負面影響的時候就要使用該方法。

stopImmediatePropagation 阻止后續(xù)事件，該方法除了阻止事件冒泡外在當前事件被綁定多個處理程序的時候，后續(xù)的處理程序也會被阻止。

currentTarget 此屬性返回當前事件所綁定的對象。

target 此屬性返回當前觸發(fā)事件的對象，注意target是觸發(fā)事件的對象，是真正的事件源，同樣以上面的HTML為例，給div綁定一個事件，點擊帶文字的span后，target是span，而currentTarget是div。

• 1
• 2
• 3
• 4

如果想要實現(xiàn)點擊每個li標簽就能打印出文本內容，我們可以不用給每個li綁定事件，只需要利用事件冒泡即可

var click = document.getElementById('click'); click.addEventListener('click', log, false); function log(e) { console.log(e.target.innerText); }

除了系統(tǒng)內置的事件外，我們還可以自定義事件，由于平時使用的不多可能感覺會很高端，其實自定義事件并不復雜

var myEvent = new Event('myEvent'); document.addEventListener('myEvent', log, false); function log() { console.log('hello event'); } document.dispatchEvent(myEvent);

通過創(chuàng)建Event對象來創(chuàng)建事件，通過dispatchEvent函數(shù)派發(fā)事件。自定義事件可以綁定到任意DOM元素上，此處選擇document只是為了演示方便。

HTML

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。