Question

我想知道在一个函数中使用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");

Answer 1

如果你的目的是附加一个事件处理程序，请点击＆＃39;只有当事情之前调用了你的函数时，触发器才会触发事件，所以是的。

Answer 2

我可以在你的函数中调用监听器。通过包含所有参数的函数一次调用函数，您可以使自己变得更容易一些。看看下面的重构代码。我正在使用对象文字来存储函数参数并调用函数一次，将对象作为单个参数传递。

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>

在包含参数的函数中添加事件侦听器是一种好习惯吗？

2 个答案: