事件代理的小Tips

galois 發布于2019-08-19 18:01 / 2212人閱讀

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

事件代理的小Tips

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

場景一

我們可能通常會遇見這樣的情況，尤其是在列表中，就是要根據每個列表項的次序來執行不同的函數。那我們怎樣獲取他在整個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);//根據不同的次序執行函數
    }
 },false);

場景二


hello

。我們可以通過e.target獲得當前事件處理的目標，通常我們獲得這個確定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綁定事件后再執行就好了。但是可是正如例子中所給，假如說我們也給是icon（小圖標）,此時我事件作用的目標是，按我們的想法來說無論是作用到icon還是作用到span，我們都是想讓他執行下去的。問題就在于此，作用的元素是確定元素的子（孫）元素那怎么辦？？？

好辦，判斷事件目標是不是該元素的子（孫）元素就行了！！！

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的后代。這個技巧挺有用的，比如說還可以在搜索框自動完成的時候會遇到，當搜索框失去焦點，suggest列表要消失，點擊頁面中的元素我們讓suggest框消失，但是點擊了suggest lists怎么辦？先消失的話，就不能跳轉對應的網址了？這個時候我們就要判斷點擊的目標在不在suggest lists內，如果在的話就先跳轉再消失了。
詳情可了解autocomplete組件

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

GPU云服務器云服務器事件代理 Javascript事件代理 tips tips1

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79101.html

11種方法實現一個tips帶有描邊的小箭頭（更新中...）

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

oneasp 2019-08-30 15:55 評論0 收藏0
11種方法實現一個tips帶有描邊的小箭頭（更新中...）

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

李濤 2019-08-02 13:58 評論0 收藏0
CSS3實戰之一些常用Tips

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

joywek 2019-08-28 18:19 評論0 收藏0