資訊專欄INFORMATION COLUMN
摘要：只能寫成在捕獲階段監(jiān)聽這個事件。默認為，表示事件是否可以被取消只有為的時候，才能用取消這個事件。阻止默認事件結(jié)果結(jié)果和在事件處理程序內(nèi)部，始終等同于，為綁定事件的元素，而是為觸發(fā)事件的實際目標。
一、事件簡述 1、事件概念
在Web中, 事件在瀏覽器窗口中被觸發(fā)，執(zhí)行事先綁定的事件處理器（也就是事件觸發(fā)時會運行的代碼塊），對事件做出響應。
用戶在瀏覽器的任何一個操作都會去觸發(fā)一個事件，JavaScript采用異步事件驅(qū)動編程模型，當文檔、瀏覽器、元素或與之相關對象發(fā)生特定事情時，瀏覽器會產(chǎn)生事件。
事件是某個行為或者觸發(fā)，比如點擊、鼠標移動、提交表單，滾動菜單等等
二、事件流 1、事件流的作用事件流描述的是從頁面中接收事件的順序，比如有兩個嵌套的div，點擊了內(nèi)層的div，這時候是內(nèi)層的div先觸發(fā)click事件還是外層先觸發(fā)？
如果事件不傳播，我們無法確定我們點擊的對象是什么？
2、事件流三種模型2.1事件冒泡模型
事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素。比如點擊div時，首先是div先監(jiān)聽到了點擊事件，然后向上傳播到body/html/document
2.2事件捕獲模型
和事件冒泡相反，事件最開始由最外層不太具體的節(jié)點先監(jiān)聽到，然后向下傳遞到最具體的元素。
比如點擊div事件，先是document監(jiān)聽到，然后分發(fā)到html/body/div
2.3DOM事件流
DOM2級事件規(guī)定事件流包括三個階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段
事件捕獲階段
處于目標階段
事件冒泡階段
3、用代碼演示dom事件流demo
JS Bin containerboxtarget
執(zhí)行結(jié)果：
![圖片上傳中...]
三、事件處理程序（事件偵聽器（listener）） 1、概念事件處理程序：事件觸發(fā)后，執(zhí)行響應對應事件的程序。
事件處理程序是預先設定的，我們需要提前定義好某些事件發(fā)生了該怎么處理，這個過程叫做綁定事件處理程序
2.1原理：
JavaScript指定事件處理程序就是把一個函數(shù)賦值給一個元素的事件處理程序?qū)傩裕ㄈ鏾nclick）
2.2綁定的過程：
選中元素，選中事件處理程序?qū)傩匀鏾nclick，給屬性賦值一個處理函數(shù)。
2.3不足：
不能給同一個元素的同一個事件處理程序?qū)傩越壎ǘ鄠€事件處理函數(shù)，會產(chǎn)生覆蓋的。
3.1簡介
DOM2事件處理程序可以解決不能綁定多個事件處理函數(shù)的問題
DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
addEventListener
removeEventListener
3.2 addEventListener使用
addEventListener有三個參數(shù)
事件類型
事件處理方法
布爾參數(shù)，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理。默認時false，沒有特殊需求，第三個參數(shù)可以不寫
3.3舉個栗子
總結(jié)：addEventListener 和制定事件處理程序的不同，一個是對屬性賦值，另外一個addEventListener是執(zhí)行一個函數(shù)，可以多次執(zhí)行
3.4 removeEventListener解綁事件
通過addEventListener添加的事件處理程序只能通過removeEventListener移除，移除時參數(shù)與添加的時候相同
添加的匿名函數(shù)無法移除
四、事件對象 1、事件對象的來源
在觸發(fā)DOM上的某個事件的時候會產(chǎn)生一個事件對象event，這個對象包含著所有與事件有關的信息，包括產(chǎn)生事件的元素、事件類型等相關信息。
2、event的常見屬性event對象包含與創(chuàng)建它的特定事件有關的屬性和方法，觸發(fā)事件的類型不同，可用的屬性和方法也不同，但是所有事件都會包含
2.1bubbles：
默認為false，表示事件對象是否冒泡。
如果該屬性為false，div.addEventListener方法在冒泡階段監(jiān)聽不會觸發(fā)。只能寫成div.addEventListener("click", callback, true)在“捕獲階段”監(jiān)聽這個事件。
2.2cancelable：
默認為false，表示事件是否可以被取消.只有為true的時候，才能用Event.preventDefault()取消這個事件。
2.3preventDefault
阻止默認事件
baidu
結(jié)果
結(jié)果
2.4target和currenttarget
在事件處理程序內(nèi)部，this始終等同于currentTarget，currentTarget為綁定事件的元素，而target是為觸發(fā)事件的實際目標。
當存在嵌套的時候，兩者不一樣，具體詳情可以見這篇文章鏈接描述，或者中文版event.target 和 event.currentTarget。我這里不做贅述
2.5stopPropagation()
阻止事件在 DOM 中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數(shù)，但是不包括在當前節(jié)點上其他的事件監(jiān)聽函數(shù)。
舉個栗子
containerboxtarget
結(jié)果
沒有給捕獲階段的box加e.stopPropagation()的結(jié)果
給捕獲階段的box加e.stopPropagation()之后的結(jié)果
五、阻止事件代理哈哈哈寫事件代理前，找到了這篇事件代理的文章用例子解釋事件模型和事件代理，這里寫事件模型的歷史也寫得相當棒，所以先就轉(zhuǎn)載過來了。
1、事件代理的原理：利用事件模型的傳播性質(zhì)，將子元素的監(jiān)聽函數(shù)綁定到父元素上，通過事件傳播去執(zhí)行監(jiān)聽函數(shù)。
2、舉個栗子需求：給container里面所有box都綁定點擊事件，點擊時輸出box的值
2.1方式一：foreach
原理：選中.box所有元素，得到一個類數(shù)組對象，遍歷這個類數(shù)組對象，給.box元素一一綁click事件。
代碼：
box1box2box3
缺點：執(zhí)行foreach選中的box時固定的，如果我們后續(xù)再加上幾個box，后加的box就沒有綁定上點擊事件。
代碼鏈接
2.2方式二事件代理
原理：給container綁定點擊事件，通過e.target獲取點擊事件目標
代碼：六、常見的事件類型box1box2box3
| 常見事件類型 | 解析 |
|---|---|
| click | 單擊 |
| dblclick | 雙擊 |
| focus | 焦點，比如表單input把光標放上去開始輸入的時刻 |
| blur | 失去焦點，比如輸入完成切換到下一個輸入框時，就失去了焦點 |
| keyup | 按鍵按下松開的時候觸發(fā)， |
| change | 比如input失去焦點并且值發(fā)生了改變 |
| submit | 表單提交的時候觸發(fā) |
| scroll | 頁面滾動的時候觸發(fā)，注意使用函數(shù)節(jié)流 |
| resize | 頁面面積變化觸發(fā)，注意使用函數(shù)節(jié)流 |
| DOMContentLoaded | DOM 結(jié)構(gòu)解析完成，不用等圖片解析 |
| load | 頁面所有資源（圖片css 等）加載完成觸發(fā)，觸發(fā)時間比較晚 |
| mouseover | 鼠標放上去觸發(fā)，注意進入元素的子元素會重復觸發(fā) |
| mouseout | 鼠標拿出去觸發(fā)，注意離開元素的子元素會重復觸發(fā) |
| mouseenter | 鼠標進入觸發(fā)，進入子元素不會觸發(fā)，比較常用 |
| mouseleave | 鼠標離開觸發(fā)，離開子元素不會觸發(fā)，比較常用 |
演示代碼：直接復制代碼到編輯器，在瀏覽器去測試這些事件
或者點擊這個鏈接測試
hello
七、自定義事件
var EventCenter = {
on: function(type, handler){
document.addEventListener(type, handler)
},
fire: function(type, data){
return document.dispatchEvent(new CustomEvent(type, {
detail: data
}))
}
}
EventCenter.on("hello", function(e){
console.log(e.detail)
})
EventCenter.fire("hello", "你好")
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99459.html
摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求將檢測到狀態(tài)變更時，如果設置有回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件，將這個回調(diào)再放入事件循環(huán)隊列中。 基礎：瀏覽器 -- 多進程，每個tab頁獨立一個瀏覽器渲染進程（瀏覽器內(nèi)核） 每個瀏覽器渲染進程是多線程的，主要包括：GUI渲染線程 JS引擎線程 也稱為JS內(nèi)核，負責處理Javascript腳本程序。（例如V8引擎） JS引擎線程負...
摘要：它通過數(shù)據(jù)模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現(xiàn)有的通過接口進行交互。 本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...
摘要：如果不熟悉，在這個教程里面，我們會通過構(gòu)建一個筆記應用來學習怎么用。這個是我們要構(gòu)建的筆記應用的截圖你可以從下載源碼，這里是的地址。每當用戶點擊筆記列表中的某一條時，組件會調(diào)用來分發(fā)這個會把當前選中的筆記設為。 原文：Learn Vuex by Building a Notes App，有刪改。 本文假設讀者熟悉 Vuex 文檔 的內(nèi)容。如果不熟悉，you definitely sho...
摘要：阻止冒泡綁定事件方法的第三個參數(shù)，就是控制事件觸發(fā)順序是否為事件捕獲。事件捕獲事件冒泡。事件觸發(fā)順序變更為自外向內(nèi)，這就是事件捕獲。 事件冒泡 事件捕獲指的是從document到觸發(fā)事件的那個節(jié)點，即自上而下的去觸發(fā)事件。 事件冒泡是自下而上(從最深節(jié)點開始，向上傳播事件)的觸發(fā)事件 //例子 var d_parent = document.getElementB...
摘要：鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇下的使用方法，傳送門使用構(gòu)建單頁應用新篇華麗的分割線原文地址前言在最近學習的時候，看到國外一篇講述了如何使用和來構(gòu)建一個簡單筆記的單頁應用的文章。 鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇 vue2.0 下的 vuex 使用方法，傳送門：使用 Vuex + Vue.js 構(gòu)建單頁應用【新篇】 ---------...
摘要：鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇下的使用方法，傳送門使用構(gòu)建單頁應用新篇華麗的分割線原文地址前言在最近學習的時候，看到國外一篇講述了如何使用和來構(gòu)建一個簡單筆記的單頁應用的文章。 鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇 vue2.0 下的 vuex 使用方法，傳送門：使用 Vuex + Vue.js 構(gòu)建單頁應用【新篇】 ---------...
閱讀 1309·2021-11-15 11:37
閱讀 2564·2021-09-22 10:56
閱讀 3391·2021-09-06 15:11
閱讀 801·2021-08-31 09:45
閱讀 2897·2021-07-28 11:16
閱讀 1806·2019-08-30 15:44
閱讀 477·2019-08-30 13:22
閱讀 3344·2019-08-30 13:18
