在包含參數的函數中添加事件偵聽器是否是一種好的做法？

我只想知道在下面的例子中的函數中使用click事件監聽器是否是好的做法。（不要試圖理解的代碼做什麼，我只是想表明的情況的一個例子，其中一個click事件是在一個函數）在包含參數的函數中添加事件偵聽器是否是一種好的做法？

function someFn(classClickedBtn, popupId) { 

      $(classClickedBtn).click(function(e) { 
       e.preventDefault(); 
       var active = "active"; 
       var mainClass = ".dialogBox"; 

        if ($(popupId).hasClass(active)) { 

         $(popupId).removeClass(active); 

        }else{ 

         for (var i = 0; i< $(mainClass).length; i++) { 
         if ($(mainClass).hasClass("active")) { 
         $(mainClass).removeClass("active"); } } 

         $(popupId).addClass(active); 

        } 

      }); 

     } 


     someFn(".btn1", "#popup"); 

     someFn(".btn2", "#popup");

來源

2016-08-02 jay_R_champ

這沒有錯，但它可以很容易導致錯誤。（'click.namespace'，function（e）{...}）;'以確保即使您重複調用該函數，也可以使用$（triggerBtnClass）.off（「click.namespace」）。只會添加一個事件偵聽器。 –

如果你的目的是要附加一個事件處理程序「點擊'事件'triggerBtnClass'，只有在某些事情調用你的函數之前，所以是的。

來源

2016-08-02 17:50:18 Luca

我很好，從你的函數內調用監聽器。通過一次調用包含所有參數的函數，您可以使自己的工作變得更輕鬆。看看下面重構的代碼。我使用一個對象字面值來存儲函數參數並調用函數一次，將對象作爲單個參數傳遞。

function someFn(fn_data) { 
 
    $(fn_data.btns).on("click", function(e) { 
 
    var active = "active"; 
 
    var mainClass = $(".dialogBox"); 
 
    var popup = $(fn_data.popupId); 
 
    
 
    e.preventDefault(); 
 
    
 
    if (popup.hasClass(active)) { 
 
     popup.removeClass(active); 
 
    } else { 
 
    
 
     for (var i = 0; i < mainClass.length; i++) { 
 
     if (mainClass.hasClass("active")) { 
 
      mainClass.removeClass("active"); 
 
     } 
 
     } 
 

 
     popup.addClass(active); 
 
    } 
 
    }); 
 
} 
 

 
someFn({ 
 
    btns: ".btn1, .btn2", 
 
    popupId: "#popup" 
 
});

#popup { 
 
    margin-top: 1em; 
 
} 
 

 
#popup.active:after { 
 
    content: 'Popup active!'; 
 
} 
 

 
#popup:after { 
 
    content: 'Popup not active!'; 
 
    color: #555; 
 
    display: block; 
 
    height: 20px; 
 
    white-space: nowrap; 
 
    margin-top: 10px; 
 
    border: 1px solid orange; 
 
    padding: 0.5em 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn1">button 1</button> 
 
<button class="btn2">button 2</button> 
 
<div id="popup">popup goes here</div>

來源

2016-08-02 18:36:48

在包含參數的函數中添加事件偵聽器是否是一種好的做法？

回答

相關問題