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

資訊專欄INFORMATION COLUMN

事件代理的小Tips

galois / 2219人閱讀

摘要：事件代理的小想必大家都知道知道事件代理的好處了，不用綁定大量的事件，減少了代碼書寫量，同時也提高了性能。事件處理通常用來處理某一相同類型的事件。

事件代理的小Tips

想必大家都知道知道事件代理的好處了，不用綁定大量的事件，減少了代碼書寫量，同時也提高了性能。事件處理通常用來處理某一相同類型的事件。

場景一 
    
  
  • 
  
  • 
  
  •

我們可能通常會遇見這樣的情況，尤其是在列表中，就是要根據(jù)每個列表項的次序來執(zhí)行不同的函數(shù)。那我們怎樣獲取他在整個listItems里的次序呢？
就是利用indexOf方法。偽代碼如下：

 var ul=document.getElemenstByTagName("ul")[0];
 var listItems=ul.getElementsByTagName("li");
 ul.addEventListener("click",function(e){
    if(e.target.tagName.toLowerCase()=="li"){
      var idx=[].indexOf.call(listItems,e.target);
       doSomething(idx);//根據(jù)不同的次序執(zhí)行函數(shù)
    }
 },false);
場景二 

hello

。我們可以通過e.target獲得當(dāng)前事件處理的目標(biāo)，通常我們獲得這個確定span元素的方法有

1. e.target.id=="a"
2. e.target.tagName/nodeName.toLowerCase()=="span"
3. e.target.className(e.target.classList.contains)=="active"
4. e.target.dataset.index==1

這個時候我們再給span綁定事件后再執(zhí)行就好了。但是可是正如例子中所給，假如說我們也給是icon（小圖標(biāo)）,此時我事件作用的目標(biāo)是，按我們的想法來說無論是作用到icon還是作用到span，我們都是想讓他執(zhí)行下去的。問題就在于此，作用的元素是確定元素的子（孫）元素那怎么辦？？？

好辦，判斷事件目標(biāo)是不是該元素的子（孫）元素就行了！！！ 
var span=document.getElementsByTagName("span")[0];
var div=document.getElementsByTagName("div")[0];
div.addEventListener("click",function(e){
   var allChilds=span.getElementsByTagName("*");
   if(e.target.dataset.index==1||[].indexOf.call(allChilds,e.target)!=-1){
    doSomething();
   }
},false);

我們通過找到span元素的所有后代，這個一個nodeLists,然后判斷點擊的元素在不在這個集合里面，從而判斷了點擊的元素是不是span的后代。這個技巧挺有用的，比如說還可以在搜索框自動完成的時候會遇到，當(dāng)搜索框失去焦點，suggest列表要消失，點擊頁面中的元素我們讓suggest框消失，但是點擊了suggest lists怎么辦？先消失的話，就不能跳轉(zhuǎn)對應(yīng)的網(wǎng)址了？這個時候我們就要判斷點擊的目標(biāo)在不在suggest lists內(nèi)，如果在的話就先跳轉(zhuǎn)再消失了。
詳情可了解autocomplete組件

本文來源于個人實踐，不定期更新~

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79101.html

相關(guān)文章

  • 11種方法實現(xiàn)一個tips帶有描邊的小箭頭（更新中...）

    摘要：查看效果第六種和背景描邊旋轉(zhuǎn)此方法就是設(shè)置一個寬度和高度分別為的方塊背景，然后背景相鄰的兩條邊描邊再有的屬性旋轉(zhuǎn)角度，來實現(xiàn)箭頭的朝向。 showImg(https://segmentfault.com/img/bVbmX2F?w=400&h=277); 我們在網(wǎng)頁開發(fā)中實現(xiàn)一個tips時會有一個小箭頭，實現(xiàn)這種方法的文章網(wǎng)上已經(jīng)泛濫了，但有時實現(xiàn)這個小箭頭不止只有單純的三角它還有描邊...

    oneasp 評論0 收藏0

  • 11種方法實現(xiàn)一個tips帶有描邊的小箭頭（更新中...）

    摘要：查看效果第六種和背景描邊旋轉(zhuǎn)此方法就是設(shè)置一個寬度和高度分別為的方塊背景，然后背景相鄰的兩條邊描邊再有的屬性旋轉(zhuǎn)角度，來實現(xiàn)箭頭的朝向。 showImg(https://segmentfault.com/img/bVbmX2F?w=400&h=277); 我們在網(wǎng)頁開發(fā)中實現(xiàn)一個tips時會有一個小箭頭，實現(xiàn)這種方法的文章網(wǎng)上已經(jīng)泛濫了，但有時實現(xiàn)這個小箭頭不止只有單純的三角它還有描邊...

    李濤 評論0 收藏0

  • CSS3實戰(zhàn)之一些常用Tips

    摘要：本文為部分翻譯文章，主要內(nèi)容來自于，筆者自身也添加了一些自己的小的。設(shè)置自動居中任何一個元素的自動居中可以使用屬性使用逗號分割列表使用負的屬性選擇元素使用作為使用作為圖標(biāo)可以達到自動縮放的效果。 本文為部分翻譯文章，主要內(nèi)容來自于：css-protips，筆者自身也添加了一些自己的小的Tips。 使用:not()屬性為導(dǎo)航添加或者去除邊框 傳統(tǒng)的方法是首先為每個li標(biāo)簽添加標(biāo)簽： /*...

    joywek 評論0 收藏0

發(fā)表評論

0條評論

galois

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<