資訊專欄INFORMATION COLUMN
摘要：取消事件的默認行為。阻止事件的派發包括了捕獲和冒泡阻止同一個事件的其他監聽函數被調用。
事件模型
DOM0 級事件模型 -沒有事件流，這種方式兼容所有瀏覽器
// 方式一 將事件直接通過屬性綁定在元素上
/ 方式二 獲取到頁面元素后，通過 onclick 等事件，將觸發的方法指定為元素的事件
var btn = document.getElementById("btn")
btn.onclick = function () {...}
btn.onclick = null
IE 事件模型 - 只有冒牌，僅在 IE 瀏覽器中有效，不兼容其他瀏覽器
事件處理階段：事件在達到目標元素時，觸發監聽事件
事件冒泡階段：事件從目標元素冒泡到 document，并且一次檢查各個節點是否綁定了監聽函數，如果有則執行
// 綁定事件 el.attachEvent(eventType, handler) // 移除事件 el.detachEvent(eventType, handler)
DOM2 級事件模型 - W3C標準模型，除 IE6-8 以外的所有現代瀏覽器都支持該事件模型
事件捕獲階段：事件從 document 向下傳播到目標元素，依次檢查所有節點是否綁定了監聽事件，如果有則執行 - 從外向內，把這個坐標轉換為具體的元素上事件的過程，就是捕獲過程(點擊事件來自觸摸屏或者鼠標，鼠標點擊并沒有位置信息，但是一般操作系統會根據位移的累積計算出來，跟觸摸屏一樣，提供坐標給瀏覽器）
事件處理階段：事件在達到目標元素時，觸發監聽事件
事件冒泡階段：事件從目標元素冒泡到 document，并且一次檢查各個節點是否綁定了監聽函數，如果有則執行 - 從內向外，是人類處理事件的邏輯
// 綁定事件 target.addEventListener(type, listener[, useCapture]); // 移除事件 target.addEventListener(type, listener[, useCapture]);事件流：
瀏覽器事件流向捕獲階段、目標階段、冒泡階段，就是我們所說的- W3C事件模型
兼容的事件綁定寫法
function bindEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, eventFn);
} else {
obj.attachEvent("on" + type, eventFn);
}
function eventFn(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
fn && fn(target, ev)
}
}
事件代理
定義：指利用“事件冒泡”，只通過指定一個事件處理程序，來管理某一類型的所有事件
優點：
（1）可以大量節省內存占用，減少事件注冊，比如在table上代理所有td的click事件就非常棒
（2）可以實現當新增子對象時無需再次對其綁定事件，對于動態內容部分尤為合適
缺點：僅限于上述需求下，如果把所有事件都用代理就可能會出現事件誤判，即本不應用觸發事件的被綁上了事件
demo: 把動態列表的點擊事件，綁定在父元素上
事件對象Event元素進行事件監聽的時候，它的回調函數里就會默認傳遞一個參數 event，它是一個對象
屬性：
event.target：指的是觸發事件的那個節點，也就是事件最初發生的節點(fn觸發的元素)
event.currentTarget：指的是正在執行的監聽函數的那個節點(fn綁定的元素)
event.isTrusted：表示事件是否是真實用戶觸發。
event.preventDefault()：取消事件的默認行為。
event.stopPropagation()：阻止事件的派發（包括了捕獲和冒泡）
event.stopImmediatePropagation()：阻止同一個事件的其他監聽函數被調用。
target和currentTarget區別：觸發事件的元素和事件綁定的元素
stopPropagation和stopImmediatePropagation區別：
stopPropagation只對書寫的那個事件有用，再綁定另一個click失效
stopImmediatePropagation對綁定的很多類型的事件都有用
兼容寫法： ev.target || ev.srcElement
addEventListener(W3C)
參數：
事件名稱 event
事件處理函數/具有 handleEvent函數的對象 listener
第三個參數
once：只執行一次
passive：承諾此事件監聽不會調用 preventDefault，這有助于性能
useCapture：是否捕獲true（否則冒泡false）
移除：removeEventListener(事件名稱、事件回調、捕獲/冒泡)
自定義事件：只能在DOM元素上自定義事件
//使用 Event 構造器來創造了一個新的事件
var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);
面試題
了解js的事件嗎？
說說js的事件/綁定事件的方法?/了解事件流嗎？
事件流的順序是什么？
補充React組件中怎么做事件代理
React組件事件代理的原理
React的事件合成機制好像和js的不太一樣 （綁定一個事件到一個組件上）
Emit事件怎么發，需要引入什么
頁面上生成一萬個button，并且綁定事件，如何做（JS原生操作DOM）
添加原生事件不移除為什么會內存泄露
vue 中的 native 修飾符
移動端點擊穿透：fastclick
手寫原生js實現事件代理，并要求兼容瀏覽器
事件如何派發也就是事件廣播（dispatchEvent
總結：https://www.cnblogs.com/dfyg-...
手寫一個冒泡排序處理事務
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103828.html
摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應。 解決方案一：使用浮動布局` Document ...
摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應。 解決方案一：使用浮動布局` Document ...
摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應。 解決方案一：使用浮動布局` Document ...
閱讀 1253·2021-11-08 13:25
閱讀 1447·2021-10-13 09:40
閱讀 2779·2021-09-28 09:35
閱讀 742·2021-09-23 11:54
閱讀 1134·2021-09-02 15:11
閱讀 2438·2019-08-30 13:18
閱讀 1675·2019-08-30 12:51
閱讀 2693·2019-08-29 18:39
