国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我所理解的JavaScript 事件委托

wushuiyong / 2695人閱讀

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

當(dāng)初學(xué)C#時(shí)，學(xué)到委托概念的時(shí)候，有點(diǎn)不知所措，在工作后運(yùn)用了很多后才發(fā)現(xiàn)真的好用。在JavaScript里面也有事件委托的概念，那在JavaScript中，事件委托又是什么樣的原理以及什么應(yīng)用場(chǎng)景呢？

事件委托的原理

事件委托，通俗地來講，就是把一個(gè)元素響應(yīng)事件（click、keydown......）的函數(shù)委托到另一個(gè)元素；
對(duì)一個(gè)技術(shù)點(diǎn)的了解的更深，就能對(duì)這個(gè)技術(shù)運(yùn)用的更好。

1：事件的冒泡，所以才可以在父元素來監(jiān)聽子元素觸發(fā)的事件。
2：DOM的遍歷，一個(gè)父級(jí)元素包含的子元素過多，那么當(dāng)一個(gè)事件被觸發(fā)時(shí)，是否觸發(fā)了某一種類型的元素呢？

這是事件委托的兩個(gè)核心，跟事件委托相關(guān)的技術(shù)點(diǎn)，如果碰到什么問題，都可以在這兩個(gè)點(diǎn)進(jìn)行切入，來尋求解決方案。
事件的冒泡這個(gè)要講一下，在 document.addEventListener 的時(shí)候我們可以設(shè)置事件模型：事件冒泡、事件捕獲，一般來說都是用事件冒泡的模型。

事件委托的優(yōu)缺點(diǎn)

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

減少內(nèi)存消耗

動(dòng)態(tài)綁定事件

缺點(diǎn)
1 耗費(fèi)性能

事件委托的應(yīng)用
使用jQuery

$("父標(biāo)簽").delegate("子標(biāo)簽","click",function(){
      var target = $(event.target);
      console.log(target);
});

或者新版本的

 $("父標(biāo)簽").on("click","子標(biāo)簽",function(){
      var target = $(event.target);
      console.log(target);
});

原生JavaScript

 document.getElementById("父標(biāo)簽").addEventListener("click", function (e) {
      // 兼容性處理
      var event = e || window.event;
      var target = event.target || event.srcElement;
      if (target.nodeName.toLocaleLowerCase === "子標(biāo)簽") {
        console.log("the node is: ", target.innerHTML);
      }
    });
其他需要注意的點(diǎn)

對(duì)于父級(jí)需要委托的對(duì)象可能有多個(gè)，需要逐個(gè)進(jìn)行綁定事件；
對(duì)于需要綁定的事件類型可能有多個(gè)，需要逐個(gè)綁定事件；
在執(zhí)行所綁定的函數(shù)的時(shí)候需要傳入正確的參數(shù)以及考慮到 this 關(guān)鍵字的問題；
**另外 事件委托也是有一定局限性的；
比如 focus、blur 這些事件沒有事件冒泡機(jī)制，所以無法進(jìn)行委托綁定事件；
而mousemove、mouseout 鼠標(biāo)操作之類的事件，盡管有事件冒泡，但是現(xiàn)在的方案都是去不斷通過位置去計(jì)算定位，對(duì)性能消耗高，因此也是不適合于事件委托的；**

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/53809.html

相關(guān)文章

  • 我所理解的JavaScript 事件委托

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

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

  • 又被事件冒泡坑了一把，這次要徹底弄懂瀏覽器的事件流

    摘要：事件冒泡一個(gè)簡(jiǎn)單，但是坑了我無數(shù)回的知識(shí)點(diǎn)與的交互通過事件來實(shí)現(xiàn)。而瀏覽器的事件流是一個(gè)非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭(zhēng)議，只需要知道在中規(guī)定的事件流包括了三個(gè)部分，事件捕獲階段處于目標(biāo)階段事件冒泡階段。 打算封裝一個(gè)彈窗組件，做的時(shí)候忘記了考慮事件冒泡的因素，結(jié)果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關(guān)的知識(shí)都給總結(jié)一下。 ...

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

  • 又被事件冒泡坑了一把，這次要徹底弄懂瀏覽器的事件流

    摘要：事件冒泡一個(gè)簡(jiǎn)單，但是坑了我無數(shù)回的知識(shí)點(diǎn)與的交互通過事件來實(shí)現(xiàn)。而瀏覽器的事件流是一個(gè)非常重要的概念。不去討論那些古老的瀏覽器有事件捕獲與事件冒泡的爭(zhēng)議，只需要知道在中規(guī)定的事件流包括了三個(gè)部分，事件捕獲階段處于目標(biāo)階段事件冒泡階段。 打算封裝一個(gè)彈窗組件，做的時(shí)候忘記了考慮事件冒泡的因素，結(jié)果被坑得不要不要的。為了解決自己的問題，去查閱了不少資料，把事件流相關(guān)的知識(shí)都給總結(jié)一下。 ...

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

  • 【譯】JavaScript面試問題：事件委托和this

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

    浠ラ箍 評(píng)論0 收藏0

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

0條評(píng)論

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