資訊專欄INFORMATION COLUMN
摘要：當初學時，學到委托概念的時候，有點不知所措，在工作后運用了很多后才發現真的好用。事件的冒泡，所以才可以在父元素來監聽子元素觸發的事件。事件的冒泡這個要講一下，在的時候我們可以設置事件模型事件冒泡事件捕獲，一般來說都是用事件冒泡的模型。
當初學C#時，學到委托概念的時候，有點不知所措，在工作后運用了很多后才發現真的好用。在JavaScript里面也有事件委托的概念，那在JavaScript中，事件委托又是什么樣的原理以及什么應用場景呢？
事件委托的原理事件委托，通俗地來講，就是把一個元素響應事件（click、keydown......）的函數委托到另一個元素；
對一個技術點的了解的更深，就能對這個技術運用的更好。
1：事件的冒泡，所以才可以在父元素來監聽子元素觸發的事件。
2：DOM的遍歷，一個父級元素包含的子元素過多，那么當一個事件被觸發時，是否觸發了某一種類型的元素呢？
這是事件委托的兩個核心，跟事件委托相關的技術點，如果碰到什么問題，都可以在這兩個點進行切入，來尋求解決方案。
事件的冒泡這個要講一下，在 document.addEventListener 的時候我們可以設置事件模型：事件冒泡、事件捕獲，一般來說都是用事件冒泡的模型。
優點
減少內存消耗
動態綁定事件
缺點
1 耗費性能
事件委托的應用
使用jQuery
$("父標簽").delegate("子標簽","click",function(){
var target = $(event.target);
console.log(target);
});
或者新版本的
$("父標簽").on("click","子標簽",function(){
var target = $(event.target);
console.log(target);
});
原生JavaScript
document.getElementById("父標簽").addEventListener("click", function (e) {
// 兼容性處理
var event = e || window.event;
var target = event.target || event.srcElement;
if (target.nodeName.toLocaleLowerCase === "子標簽") {
console.log("the node is: ", target.innerHTML);
}
});
其他需要注意的點
對于父級需要委托的對象可能有多個，需要逐個進行綁定事件；
對于需要綁定的事件類型可能有多個，需要逐個綁定事件；
在執行所綁定的函數的時候需要傳入正確的參數以及考慮到 this 關鍵字的問題；
**另外 事件委托也是有一定局限性的；
比如 focus、blur 這些事件沒有事件冒泡機制，所以無法進行委托綁定事件；
而mousemove、mouseout 鼠標操作之類的事件，盡管有事件冒泡，但是現在的方案都是去不斷通過位置去計算定位，對性能消耗高，因此也是不適合于事件委托的；**
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102497.html
摘要：當初學時，學到委托概念的時候，有點不知所措，在工作后運用了很多后才發現真的好用。事件的冒泡，所以才可以在父元素來監聽子元素觸發的事件。事件的冒泡這個要講一下，在的時候我們可以設置事件模型事件冒泡事件捕獲，一般來說都是用事件冒泡的模型。 當初學C#時，學到委托概念的時候，有點不知所措，在工作后運用了很多后才發現真的好用。在JavaScript里面也有事件委托的概念，那在JavaScrip...
摘要：事件冒泡一個簡單，但是坑了我無數回的知識點與的交互通過事件來實現。而瀏覽器的事件流是一個非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規定的事件流包括了三個部分，事件捕獲階段處于目標階段事件冒泡階段。 打算封裝一個彈窗組件，做的時候忘記了考慮事件冒泡的因素，結果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關的知識都給總結一下。 ...
摘要：事件冒泡一個簡單，但是坑了我無數回的知識點與的交互通過事件來實現。而瀏覽器的事件流是一個非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭議，只需要知道在中規定的事件流包括了三個部分，事件捕獲階段處于目標階段事件冒泡階段。 打算封裝一個彈窗組件，做的時候忘記了考慮事件冒泡的因素，結果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關的知識都給總結一下。 ...
摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監聽器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...
閱讀 908·2023-04-25 18:51
閱讀 1863·2021-09-09 11:39
閱讀 3276·2019-08-30 15:53
閱讀 2090·2019-08-30 13:03
閱讀 1304·2019-08-29 16:17
閱讀 574·2019-08-29 11:33
閱讀 1878·2019-08-26 14:00
閱讀 2118·2019-08-26 13:41
