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

lentoo 發(fā)布于2019-08-21 17:36 / 376人閱讀

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

事件冒泡/捕獲

事件冒泡	事件捕獲
IE和標(biāo)準(zhǔn)瀏覽器	標(biāo)準(zhǔn)瀏覽器
傳播順序：先捕獲，后冒泡
早期IE只支持事件冒泡，不支持事件捕獲

綁定事件

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

事件冒泡優(yōu)點(diǎn)

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

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

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

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

云服務(wù)器 GPU云服務(wù)器委托事件事件委托冒泡事件事件冒泡

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89730.html

相關(guān)文章

JS專題之事件模型

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

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

摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點(diǎn)是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監(jiān)聽器。 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 事件委托

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

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

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

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

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

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