【總結整理】JavaScript的DOM事件學習（慕課網）

事件：在文檔或者瀏覽器窗口中發生的一些，特定的交互瞬間

? ? ? ? ? HTML和JavaScript的交互通過事件 來實現

比如：1.滾動條向下滑動，加載圖片 2.圖片輪播，鼠標由2-5頁調換

?

本章內容
1、理解事件流
2、使用事件處理程序
3、不同的事件類型
一、事件流
事件流描述的是從頁面中接受事件的順序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流
1、事件冒泡
　事件冒泡，即事件最開始由最具體的元素(文檔中嵌套層次最深的那個節點)接收，然后逐級向上轉播至最不具體的節點(文檔)。
2、事件捕獲
　事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點最后接收到事件。

二、事件處理程序
1、HTML事件處理程序

? ? ?直接賦值在標簽上，用事件調用，麻煩，改動至少要改兩個地方
2、DOM0級事件處理程序

? ? ?比較傳統的方式：把一個函數賦值給一個事件的處理程序的屬性，簡單，可跨瀏覽器

　　btn2.οnclick=showMessage;//?函數調用不加引號不叫括號
3、DOM2級事件處理程序
　　DOM2級事件定義了兩個方法：用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()

　　它們都接收三個參數：

　　　　要處理的事件名；//去掉on?

　　　　作為事件處理程序的函數；//?函數調用不加引號不叫括號

　　　　一個布爾值。//主要用false

? ? ? true在捕獲階段調用事件處理程序，false在冒泡階段調用事件處理程序（主要）

btn3.addEventListener('click',showMessage,false);//ie不起作用

btn3.removeEventListener('click',showMessage,false)
4、IE事件處理程序
　　attachEvent()添加事件
　　detachEvent()刪除事件

btn3.attachEvent('onclick',showMessage);

btn3.detachEvent('onclick',showMessage);//事件還是要有on
　　這兩個方法接收相同的兩個參數：（事件處理程序名稱，?事件處理函數）//兩個參數的原因：因為IE8及更早期的版本只支持事件冒泡，默認加到冒泡階段

支持ie事件處理器的瀏覽器有ie和opera

5、跨瀏覽器的事件處理程序

//element.'on'+type
//element.('on'+type)
//element.οnclick===element['onclick']

js中用element.加屬性都等價于element[]?

三、事件對象
事件對象event : 在觸發DOM上的某個事件的時候都會產生一個事件對象
1、DOM中的事件對象
　　(1)、type:獲取事件類型
　　(2)、target：用于獲取事件目標，事件給誰加上，事件來自于哪個屬性 ?? ?或者節點名稱（element.target.nodeName） ?
　　(3)、event.stopPropagation() 阻止事件冒泡 ?event.preventDefault() ?寫了這個函數后，就不會向上冒泡
　　(4)、event.preventDefault() 阻止事件的默認行為

? ? ? ? ? ? ? ?默認行為：比如：<a href='#'>超鏈接</a>

　　　　a標簽的默認行為就是跳轉

　　　　bubbles屬性 canselable屬性
2、IE中的事件對象
　　(1)、type:獲取事件類型
　　(2)、srcElement：用于獲取事件的目標
　　(3)、cancelBubble=true阻止事件冒泡　　
　　(4)、returnValue=false阻止事件的默認行為

?