JavaScript事件

事件流

事件冒泡

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

設備事件

觸摸與手勢事件

內存和性能

事件委托

移除事件處理程序

模擬事件

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末萍恕,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子允粤,更是在濱河造成了極大的恐慌崭倘,老刑警劉巖类垫,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異阔挠,居然都是意外死亡飘庄,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進店門购撼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人迂求,你說我怎么就攤上這事】郑” “怎么了毫玖?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我付枫,道長烹玉,這世上最難降的妖魔是什么阐滩? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮继效,結果婚禮上,老公的妹妹穿的比我還像新娘瑞信。我一直安慰自己,他們只是感情好凡简,可當我...
    茶點故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著潘鲫,像睡著了一般肋杖。 火紅的嫁衣襯著肌膚如雪溉仑。 梳的紋絲不亂的頭發(fā)上状植,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天,我揣著相機與錄音津畸,去河邊找鬼。 笑死肉拓,一個胖子當著我的面吹牛,可吹牛的內容都是我干的卑惜。 我是一名探鬼主播,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼露久,長吁一口氣:“原來是場噩夢啊……” “哼欺栗!你這毒婦竟也來了毫痕?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤消请,失蹤者是張志新(化名)和其女友劉穎栏笆,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體梯啤,經...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡因宇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年祟偷,在試婚紗的時候發(fā)現自己被綠了察滑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片修肠。...
    茶點故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖饲化,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情吃靠,我是刑警寧澤,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布巢块,位于F島的核電站巧号,受9級特大地震影響族奢,放射性物質發(fā)生泄漏丹鸿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一廊敌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧庭敦,春花似錦、人聲如沸秧廉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蔽豺,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間修陡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工宴杀, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人旺罢。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓绢记,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蠢熄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,055評論 2 355

推薦閱讀更多精彩內容

  • 事件處理程序在應用中是必不可少的,雖然現在很多框架都有自己實現事件處理方法,但是熟知原生才能讓我們應對各種各樣的需...
    俗三瘋閱讀 289評論 0 1
  • 一惠遏、事件流 1.1 事件流 事件流:從頁面中接受事件的順序 事件冒泡:即事件開始時由最具體的元素(文檔中嵌套層次最...
    范小飯_閱讀 1,070評論 1 9
  • 事件流 事件流描述的是從頁面中接受事件的順序骏啰。但是IE和Netscape開發(fā)團隊提出了差不多相反的事件流的概念。I...
    losspm閱讀 265評論 0 0
  • 事件基本概念 事件類型:用來說明發(fā)生什么類型事件的字符串判耕,即事件名。事件目標:發(fā)生事件的對象壁熄。當談論事件時,會同時...
    留七七閱讀 1,030評論 0 11
  • 最近看了不少關于測試的文章狸臣、博客、這篇文章是前不久看的烛亦,和大家分享一下诈泼,不知道作者和出處煤禽,這里就不標明,希望原作者...
    LP_ProgramLife閱讀 1,006評論 4 23