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

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

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

事件冒泡/捕獲

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

綁定事件

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

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89730.html

相關(guān)文章

JS專(zhuān)題之事件模型

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

W4n9Hu1 2019-08-26 13:24 評(píng)論0 收藏0
【譯】JavaScript面試問(wèn)題：事件委托和this

摘要：主題來(lái)自于的典型面試問(wèn)題列表。有多種方法來(lái)處理事件委托。這種方法的缺點(diǎn)是父容器的偵聽(tīng)器可能需要檢查事件來(lái)選擇正確的操作，而元素本身不會(huì)是一個(gè)監(jiān)聽(tīng)器。 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 評(píng)論0 收藏0
我所理解的JavaScript 事件委托

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

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

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

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

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

zhichangterry 2019-08-22 11:06 評(píng)論0 收藏0