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