亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

詳解JS事件 - 事件模型/事件流/事件代理/事件對(duì)象/自定義事件

URLOS / 3578人閱讀

摘要：取消事件的默認(rèn)行為。阻止事件的派發(fā)包括了捕獲和冒泡阻止同一個(gè)事件的其他監(jiān)聽函數(shù)被調(diào)用。

事件模型

DOM0 級(jí)事件模型 -沒有事件流，這種方式兼容所有瀏覽器

// 方式一  將事件直接通過(guò)屬性綁定在元素上

/ 方式二 獲取到頁(yè)面元素后，通過(guò) onclick 等事件，將觸發(fā)的方法指定為元素的事件
var btn = document.getElementById("btn")
btn.onclick = function () {...}
btn.onclick = null

IE 事件模型 - 只有冒牌，僅在 IE 瀏覽器中有效，不兼容其他瀏覽器

事件處理階段：事件在達(dá)到目標(biāo)元素時(shí)，觸發(fā)監(jiān)聽事件

事件冒泡階段：事件從目標(biāo)元素冒泡到 document，并且一次檢查各個(gè)節(jié)點(diǎn)是否綁定了監(jiān)聽函數(shù)，如果有則執(zhí)行

// 綁定事件
el.attachEvent(eventType, handler)
// 移除事件
el.detachEvent(eventType, handler)

DOM2 級(jí)事件模型 - W3C標(biāo)準(zhǔn)模型，除 IE6-8 以外的所有現(xiàn)代瀏覽器都支持該事件模型

事件捕獲階段：事件從 document 向下傳播到目標(biāo)元素，依次檢查所有節(jié)點(diǎn)是否綁定了監(jiān)聽事件，如果有則執(zhí)行 - 從外向內(nèi)，把這個(gè)坐標(biāo)轉(zhuǎn)換為具體的元素上事件的過(guò)程，就是捕獲過(guò)程(點(diǎn)擊事件來(lái)自觸摸屏或者鼠標(biāo)，鼠標(biāo)點(diǎn)擊并沒有位置信息，但是一般操作系統(tǒng)會(huì)根據(jù)位移的累積計(jì)算出來(lái)，跟觸摸屏一樣，提供坐標(biāo)給瀏覽器）

事件處理階段：事件在達(dá)到目標(biāo)元素時(shí)，觸發(fā)監(jiān)聽事件

事件冒泡階段：事件從目標(biāo)元素冒泡到 document，并且一次檢查各個(gè)節(jié)點(diǎn)是否綁定了監(jiān)聽函數(shù)，如果有則執(zhí)行 - 從內(nèi)向外，是人類處理事件的邏輯

// 綁定事件
target.addEventListener(type, listener[, useCapture]);
// 移除事件
target.addEventListener(type, listener[, useCapture]);

事件流：

瀏覽器事件流向捕獲階段、目標(biāo)階段、冒泡階段，就是我們所說(shuō)的- 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)
    }
  }

事件代理

定義：指利用“事件冒泡”，只通過(guò)指定一個(gè)事件處理程序，來(lái)管理某一類型的所有事件

優(yōu)點(diǎn)：

（1）可以大量節(jié)省內(nèi)存占用，減少事件注冊(cè)，比如在table上代理所有td的click事件就非常棒

（2）可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)無(wú)需再次對(duì)其綁定事件，對(duì)于動(dòng)態(tài)內(nèi)容部分尤為合適

缺點(diǎn)：僅限于上述需求下，如果把所有事件都用代理就可能會(huì)出現(xiàn)事件誤判，即本不應(yīng)用觸發(fā)事件的被綁上了事件

demo: 把動(dòng)態(tài)列表的點(diǎn)擊事件，綁定在父元素上

事件對(duì)象Event

元素進(jìn)行事件監(jiān)聽的時(shí)候，它的回調(diào)函數(shù)里就會(huì)默認(rèn)傳遞一個(gè)參數(shù) event，它是一個(gè)對(duì)象

屬性：

event.target：指的是觸發(fā)事件的那個(gè)節(jié)點(diǎn)，也就是事件最初發(fā)生的節(jié)點(diǎn)(fn觸發(fā)的元素)

event.currentTarget：指的是正在執(zhí)行的監(jiān)聽函數(shù)的那個(gè)節(jié)點(diǎn)(fn綁定的元素)

event.isTrusted：表示事件是否是真實(shí)用戶觸發(fā)。

event.preventDefault()：取消事件的默認(rèn)行為。

event.stopPropagation()：阻止事件的派發(fā)（包括了捕獲和冒泡）

event.stopImmediatePropagation()：阻止同一個(gè)事件的其他監(jiān)聽函數(shù)被調(diào)用。

target和currentTarget區(qū)別：觸發(fā)事件的元素和事件綁定的元素

stopPropagation和stopImmediatePropagation區(qū)別：

stopPropagation只對(duì)書寫的那個(gè)事件有用，再綁定另一個(gè)click失效

stopImmediatePropagation對(duì)綁定的很多類型的事件都有用

兼容寫法： ev.target || ev.srcElement

addEventListener(W3C)

參數(shù)：

事件名稱 event

事件處理函數(shù)/具有 handleEvent函數(shù)的對(duì)象 listener

第三個(gè)參數(shù)

once：只執(zhí)行一次

passive：承諾此事件監(jiān)聽不會(huì)調(diào)用 preventDefault，這有助于性能

useCapture：是否捕獲true（否則冒泡false）

移除：removeEventListener(事件名稱、事件回調(diào)、捕獲/冒泡)

自定義事件：

只能在DOM元素上自定義事件

//使用 Event 構(gòu)造器來(lái)創(chuàng)造了一個(gè)新的事件
var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);
面試題

了解js的事件嗎？

說(shuō)說(shuō)js的事件/綁定事件的方法?/了解事件流嗎？

事件流的順序是什么？

補(bǔ)充

React組件中怎么做事件代理

React組件事件代理的原理

React的事件合成機(jī)制好像和js的不太一樣 （綁定一個(gè)事件到一個(gè)組件上）

Emit事件怎么發(fā)，需要引入什么

頁(yè)面上生成一萬(wàn)個(gè)button，并且綁定事件，如何做（JS原生操作DOM）

添加原生事件不移除為什么會(huì)內(nèi)存泄露

vue 中的 native 修飾符

移動(dòng)端點(diǎn)擊穿透：fastclick

手寫原生js實(shí)現(xiàn)事件代理，并要求兼容瀏覽器

事件如何派發(fā)也就是事件廣播（dispatchEvent

總結(jié)：https://www.cnblogs.com/dfyg-...

手寫一個(gè)冒泡排序處理事務(wù)

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

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

相關(guān)文章

  • 前端面試（知識(shí)點(diǎn)）整理（一）

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

    zhichangterry 評(píng)論0 收藏0

  • 前端面試（知識(shí)點(diǎn)）整理（一）

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

    Songlcy 評(píng)論0 收藏0

  • 前端面試（知識(shí)點(diǎn)）整理（一）

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

    ThreeWords 評(píng)論0 收藏0

  • js 事件筆記

    摘要：只能寫成在捕獲階段監(jiān)聽這個(gè)事件。默認(rèn)為，表示事件是否可以被取消只有為的時(shí)候，才能用取消這個(gè)事件。阻止默認(rèn)事件結(jié)果結(jié)果和在事件處理程序內(nèi)部，始終等同于，為綁定事件的元素，而是為觸發(fā)事件的實(shí)際目標(biāo)。 一、事件簡(jiǎn)述 1、事件概念 在Web中, 事件在瀏覽器窗口中被觸發(fā)，執(zhí)行事先綁定的事件處理器（也就是事件觸發(fā)時(shí)會(huì)運(yùn)行的代碼塊），對(duì)事件做出響應(yīng)。用戶在瀏覽器的任何一個(gè)操作都會(huì)去觸發(fā)一個(gè)事件，J...

    Barry_Ng 評(píng)論0 收藏0

  • DOM事件機(jī)制

    摘要：而事件分為個(gè)級(jí)別級(jí)事件處理，級(jí)事件處理和級(jí)事件處理。一個(gè)事件發(fā)生后，會(huì)在子元素和父元素之間傳播。也就是說(shuō)，始終是監(jiān)聽事件者，而是事件的真正發(fā)出者。五參考文章級(jí)別與事件事件機(jī)制解惑事件模型事件委托詳解事件的學(xué)與記和和的區(qū)別 前言 本文主要介紹DOM事件級(jí)別、DOM事件模型、事件流、事件代理和Event對(duì)象常見的應(yīng)用，希望對(duì)你們有些幫助和啟發(fā)！ 本文首發(fā)地址為GitHub博客,寫文章不易，...

    laznrbfe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<