事件模型(事件冒泡/事件委托)的整理

lentoo 發布于2019-08-21 17:36 / 372人閱讀

摘要：事件冒泡捕獲事件冒泡事件捕獲和標準瀏覽器標準瀏覽器傳播順序先捕獲，后冒泡早期只支持事件冒泡，不支持事件捕獲綁定事件，標準瀏覽器三個參數事件類型，沒有事件處理函數布爾型的數值，默認事件冒泡，事件捕獲有兩個參數事件類型，有事件處理函數阻止事件冒

事件冒泡/捕獲

事件冒泡	事件捕獲
IE和標準瀏覽器	標準瀏覽器
傳播順序：先捕獲，后冒泡
早期IE只支持事件冒泡，不支持事件捕獲

綁定事件

.addEventListener("click",function(){}，false)	.attachEvent("onclick",function(){})
標準瀏覽器	IE
三個參數: 1.事件類型，沒有on 2.事件處理函數 3.布爾型的數值，默認false（事件冒泡），true（事件捕獲）	有兩個參數： 1.事件類型，有on 2.事件處理函數
阻止事件冒泡/捕獲 : e.stopPropagation();	阻止事件冒泡 : window.event,cancelBubble=true
	問題： 1.順序相反 2.this指向window

事件冒泡優點

1.有很多子元素，并且綁定同一種事件，可以委托給父元素代理（事件代理/事件委托）

2.對于后生成事件的綁定，可以用事件委托

e.currentTarget=this  
e.target獲取事件源  
可以通過e.currentTarget和e.target的比較得知是不是由事件冒泡觸發的

總結：事件模型/事件冒泡/事件委托：利用事件冒泡，把子元素委托給父元素綁定

GPU云服務器云服務器委托事件事件委托冒泡事件事件冒泡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89730.html

JS專題之事件模型

摘要：三事件流規定事件包括三個階段，事件捕獲，處于目標階段事件冒泡。一起來看添加新增加的，點擊發現沒有反應，說明事件沒有綁定進去，但是我們也并不想，每增加一個新元素，就為這個新元素綁定事件，重復低效率的工作應當避免去做。本文共 1960 字，讀完只需 8 分鐘事件用戶與網頁交互是通過事件實現的，事件剛開始是作為分擔服務器負載的一個手段，起初沒有統一的規范，直到 DOM2 級，網景和 I...

W4n9Hu1 2019-08-26 13:24 評論0 收藏0
【譯】JavaScript面試問題：事件委托和this

摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監聽器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 評論0 收藏0
我所理解的JavaScript 事件委托

摘要：當初學時，學到委托概念的時候，有點不知所措，在工作后運用了很多后才發現真的好用。事件的冒泡，所以才可以在父元素來監聽子元素觸發的事件。事件的冒泡這個要講一下，在的時候我們可以設置事件模型事件冒泡事件捕獲，一般來說都是用事件冒泡的模型。當初學C#時，學到委托概念的時候，有點不知所措，在工作后運用了很多后才發現真的好用。在JavaScript里面也有事件委托的概念，那在JavaScrip...

vvpvvp 2019-08-23 15:43 評論0 收藏0
我所理解的JavaScript 事件委托

摘要：當初學時，學到委托概念的時候，有點不知所措，在工作后運用了很多后才發現真的好用。事件的冒泡，所以才可以在父元素來監聽子元素觸發的事件。事件的冒泡這個要講一下，在的時候我們可以設置事件模型事件冒泡事件捕獲，一般來說都是用事件冒泡的模型。當初學C#時，學到委托概念的時候，有點不知所措，在工作后運用了很多后才發現真的好用。在JavaScript里面也有事件委托的概念，那在JavaScrip...

wushuiyong 2019-08-02 14:26 評論0 收藏0
前端面試（知識點）整理（一）

摘要：接受個參數事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發上綁定的自定義事件觸發元素上綁定事件事件的委托代理的原理以及優缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。一、頁面布局 1.問題：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應。解決方案一：使用浮動布局` Document ...

zhichangterry 2019-08-22 11:06 評論0 收藏0