事件流
事件冒泡
IE的事件流叫做事件冒泡,即事件開始時由具體的元素接收谭溉,然后逐級向上傳播到較為不具體的節(jié)點挂绰。
事件捕獲
思想是不太具體的節(jié)點應該更早接收到事件堤尾,而最具體的節(jié)點應該最后接收到事件。用意在事件到達預定目標前捕獲它媒殉。
事件流
DOM2級事件規(guī)定的事件流包括三個階段:事件捕獲階段兽埃、處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲适袜,為截獲事件提供了機會柄错。然后是實際的目標接收到事件。最后一個階段是冒泡階段苦酱,可以在這個階段對事件作出響應售貌。
事件處理程序
HTML事件處理程序
某個元素支持的每種事件,都可以使用一個與相應事件處理程序同名的HTML特性來指定疫萤。這個特性的值應該是能夠執(zhí)行的JavaScript代碼颂跨。
缺點:時差問題;作用域鏈在不同瀏覽器中會導致不同的結果扯饶;代碼緊耦合恒削。
DOM0級事件處理程序
通過JavaScript指定事件處理程序的傳統(tǒng)方式,就是講一個函數賦值給一個事件處理程序屬性尾序。
DOM2級事件處理程序
定義了兩個方法钓丰,用于處理指定和刪除事件處理程序的操作:addEventListener、removeEventListener每币。所有DOM節(jié)點都包含著兩個方法携丁,并且它們都接受三個參數:要處理的事件名,作為事件處理程序的函數和一個布爾值兰怠。最后這個布爾值true梦鉴,表示在捕獲階段調用事件處理程序李茫;false,表示在冒泡階段調用事件處理程序肥橙。
使用DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序魄宏。
IE事件處理程序
attachEvent、detachEvent存筏。參數都是:事件處理程序名稱娜庇,事件處理程序函數。
跨瀏覽器的事件處理程序
要保證處理事件的代碼能在大多數瀏覽器下一致運行方篮,只需關注冒泡階段名秀。
事件對象
DOM中的事件對象
兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。無論指定事件處理程序時使用什么方法(DOM0級或DOM2級)藕溅,都會傳入event對象匕得。
IE中的事件對象
DOM0級window.event
使用attachEvent時,函數是有一個event的參數的
跨瀏覽器的事件對象
事件類型
UI事件巾表,當用戶與頁面上的元素交互時觸發(fā)汁掠;
焦點事件,當元素獲得或失去焦點時觸發(fā)集币;
鼠標事件考阱,當用戶通過鼠標在頁面執(zhí)行操作時觸發(fā);
滾輪事件鞠苟,當使用鼠標滾輪或類似設備時觸發(fā)乞榨;
文本事件,當在文檔中輸入文本時觸發(fā)当娱;
鍵盤事件吃既,當用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā);
合成事件跨细,當為IME輸入字符時觸發(fā)鹦倚;
變動事件,當底層DOM結構發(fā)生變化時觸發(fā)冀惭;
變動名稱事件震叙,當元素或屬性名變動時觸發(fā),已廢棄散休。
UI事件
load:當頁面完全加載后再window上面觸發(fā)媒楼,當所有框架都加載完畢時在框架集上面觸發(fā),當圖像加載完畢時在<img>元素上面觸發(fā)溃槐,當嵌入的內容加載完畢時在<object>元素上觸發(fā)匣砖;
unload:當頁面完全卸載后在window上面觸發(fā),當所有框架都卸載后在框架集上面觸發(fā)昏滴,當嵌入的內容卸載完畢后在<object>元素上面觸發(fā)猴鲫;
abort:在用戶停止下載過程時,如果嵌入的內容沒有加載完谣殊,則在<object>上面觸發(fā)拂共;
error:當js錯誤時在window上面觸發(fā),當無法加載圖像時在<img>上面觸發(fā)姻几,當無法加載嵌入內容時在<object>元素上面觸發(fā)宜狐,當有一個或多個框架無法加載時在框架集上賣弄觸發(fā)
select:當用戶選擇文本框<input>或<textarea>中的一或多個字符時觸發(fā)
resize:當窗口或框架大小變化時在window或者框架上面觸發(fā)
scroll:當用戶滾動帶滾動條的元素中的內容時,在該元素上面觸發(fā)蛇捌。<body>元素包含所加載頁面的滾動條
焦點事件
blur:在元素失去焦點時觸發(fā)抚恒,這個事件不會冒泡;所有瀏覽器都支持它
focus:在元素獲得焦點時觸發(fā)络拌;不會冒泡俭驮,所有瀏覽器都支持
focusing:在元素獲得焦點時觸發(fā)
focusout:失去焦點時觸發(fā)
鼠標和滾輪事件
click:用戶單擊主鼠標按鈕或者按下回車鍵時觸發(fā)
dbclick:在用戶雙擊主鼠標按鈕時觸發(fā)
mousedown:用戶按下了任意鼠標按鈕時觸發(fā)
mouseenter:在鼠標光標從元素外部首次移動到元素范圍之內時觸發(fā)
mouseleave:在位于元素上方的鼠標光標移動到元素范圍之外時觸發(fā)。
mousemove:當鼠標指針在元素內部移動時重復的觸發(fā)
mouseout:在鼠標指針位于一個元素上方春贸,然后用戶將其移入另一個元素時觸發(fā)
mouseover:在鼠標指針位于一個元素外部混萝,然后用戶將其首次移入另一個元素邊界之內時觸發(fā)
mouseup:在用戶釋放鼠標按鈕是觸發(fā)
鍵盤與文本事件
keydown:用戶按下鍵盤上的任意鍵時
keypress:用戶按下鍵盤上的字符鍵時
keyup:用戶釋放鍵盤上的鍵
textInput:文本事件,先于keypress
復合事件
變動事件
HTML5事件
contextmenu
beforeunload
readystatechange