在包含参数的函数中添加事件侦听器是否是一种好的做法？

我只想知道在下面的例子中的函数中使用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

在包含参数的函数中添加事件侦听器是否是一种好的做法？

回答

相关问题