資訊專欄INFORMATION COLUMN
摘要：捕獲型事件流事件的傳播是從最不特定的事件目標到最特定的事件目標。鼠標移入元素范圍內觸發，該事件不冒泡，即鼠標移到其后代元素上時不會觸發。
事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行，事件是可以被 JavaScript 偵測到的行為
綁定事件首先我們要先綁定事件 綁定事件有三種
1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等
只可以執行一次 多次使用會跟隨文檔流所覆蓋
只彈出一個 瞅你咋地 你瞅啥被覆蓋
2）在JavaScript代碼中綁定，在JavaScript代碼中（即 script 標簽內）綁定事件可以使JavaScript代碼與HTML標簽分離，文檔結構清晰，便于管理和開發
3）使用事件監聽綁定事件
綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監聽函數
兩個都可以正常彈出 跟隨文檔流執行
事件流過程
冒泡 捕獲
DOM標準規定事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。
捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。即從外部到內部。
冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從內部到外部
我們有以下代碼 點擊box3的時候 跟隨圖片描述 捕獲 冒泡
box1
box2
box3
在處于目標階段的時候 就是在本文中點擊box3的時候 如果把冒泡寫在捕獲前面 會跟隨文檔流所執行 導致先冒泡 再捕獲 這一點一定要注意 如以下
如同圖中所示 輸出時順序和你寫入時順序有關
什么是事件委托：
事件委托——給父元素綁定事件，用來監聽子元素的冒泡事件，并找到是哪個子元素的事件
事件委托三部曲：
第一步：給父元素綁定事件
給元素ul添加綁定事件，通過addEventListener為點擊事件click添加綁定
第二步：監聽子元素的冒泡事件
這里默認是冒泡，點擊子元素li會向上冒泡
第三步：找到是哪個子元素的事件
通過匿名回調函數來接收事件對象，通過alert驗證
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如圖所示
阻止事件阻止冒泡
我們在上文寫了冒泡事件 既然它能冒泡 如果我們不想用這個效果了 那么我們有辦法阻止它嗎？答案是肯定的。我們直接看代碼，能夠更加明了
第一次點擊
當我們第二次點擊的時候 只會彈出一個box1 ，阻止了box2的第二次冒泡
阻止默認事件
在我們網頁中 如果我們點擊右鍵是不是會彈出一個框，這里我不會截圖 就不給大家展示了，里面會有刷新、粘貼、復制、剪切等等按鈕 這個就是瀏覽器的右鍵默認事件，我們來嘗試下看能不能把它給阻止了。
有興趣的話我們還可以把它變成自己的
mouseover:鼠標移入目標范圍中。鼠標移到其后代元素上時會觸發
//當鼠標進入box區域彈出顯示框
box.onmouseover=function(){
alert("我進來了")
}
mousemove:鼠標在元素內部移到時不斷觸發。
box.onmousemove=function(){
console.log("自由的行走")
}
會不斷的被觸發，移動一次觸發一次![圖片描述][9]
鍵盤事件
keydown():
按鍵按下時，會觸發該事件；
2. keyup();
按鍵松開時，會觸發該事件；
3. keypress();
敲擊按鍵時觸發，和keyup()大致相同 我找了很多資料 卻還是沒有明確的區別 希望有大佬指點下
HTML事件
1.onload 文檔加載完成后執行函數
2.select 被選中的時候使用 我的理解是在input中 選中的時候
3.onchange 當內容失去焦點的時候或者改變的時候觸發
focus 得到光標的時候使用
5.resize 窗口變化時
以上就是我對js事件的理解，首先謝謝您的觀看，文中如果有些不周到的地方還請指點一下，碼字不易，請各位多多支持。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116921.html
摘要：捕獲型事件流事件的傳播是從最不特定的事件目標到最特定的事件目標。鼠標移入元素范圍內觸發，該事件不冒泡，即鼠標移到其后代元素上時不會觸發。 事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行，事件是可以被 JavaScript 偵測到的行為 綁定事件 首先我們要先綁定事件 綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...
摘要：在內聯模型中，事件處理函數是標簽的一個屬性，用于處理指定事件。事件捕獲與冒泡原理圖事件流同時支持兩種事件模型捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。 javascript -- 事件 事件是js和用戶操作交互的橋梁, JavaScript 有三種事件模型：內聯模型、腳本模型和 DOM2 模型 內聯模型 這種模型是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函數是 HT...
摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。 本文主要解決兩個問題： 什么是事件流 DOM事件流的三個階段 起因 在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...
摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。 本文主要解決兩個問題： 什么是事件流 DOM事件流的三個階段 起因 在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...
閱讀 2562·2021-09-02 15:40
閱讀 1566·2019-08-30 15:54
閱讀 1080·2019-08-30 12:48
閱讀 3398·2019-08-29 17:23
閱讀 1046·2019-08-28 18:04
閱讀 3664·2019-08-26 13:54
閱讀 606·2019-08-26 11:40
閱讀 2391·2019-08-26 10:15
