如何避免每次运行函数时设置点击绑定事件

Question

所以我制作了这个叠加功能，并且我还让它在点击叠加时关闭它的自身。问题是我每次运行函数时都会绑定点击事件（$overlay.click(function() {...}），我认为这对性能不利。有什么想法吗？

function fluidOverlayShow(action, currentElement) {
  var $overlay = $('#fluid-overlay');
  if (action == 'open') {
    $overlay.click(function() {
      emgFluidOverlayShow('close', currentElement);
    });
    $(currentElement).addClass('fluid-bring-front');
    $overlay.addClass('fluid-anim-overlay');
    $overlay.data('statuson', true);
  } else if (action == 'close') {
    $overlay.removeClass('fluid-anim-overlay');
    $overlay.data('statuson', false);
    $('.fluid-header').find('.fluid-bring-front').removeClass('fluid-bring-front');
  }
}

$('#overlay_test').mouseover(function() {
  fluidOverlayShow('open', '#overlay_test');
});

$('#overlay_test').mouseout(function() {
  fluidOverlayShow('close');
});

#fluid-overlay {
  display: none;
  opacity: 0.3;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1000;
}

#overlay_test {
  position: relative;
}
  

#fluid-overlay.fluid-anim-overlay {
    display: block;
    -webkit-animation: fade-in-overlay 0.2s 1;
    -moz-animation:    fade-in-overlay 0.2s 1;
    animation:         fade-in-overlay 0.2s 1;
}

.fluid-bring-front {
    z-index: 1100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:;" id="overlay_test">Overlay test</a>
<div id="fluid-overlay"></div>

Answer 1

如果您绝对必须在函数中保留点击事件，请使用.on() 和.off()，然后在定义on("click") 之前定义.off("click")，如下所示：

$overlay.off("click").on("click", function() {
  emgFluidOverlayShow('close', currentElement);
});

这将在添加事件绑定之前删除它。

您甚至可以像这样命名点击事件，这样它只会删除该点击实例（以防其他事件被添加到其他地方）：

$overlay.off("click.fluidOverlayClose").on("click.fluidOverlayClose", function() {
  emgFluidOverlayShow('close', currentElement);
});

或者...

...按照 Guruprasad Rao 的建议进行操作，并将其移出函数（这是一种更好的处理方式）。

Answer 2

另一种实现使用jQuery's .on() method combined with event delgation。他的意思是，您允许单击事件通过 DOM 冒泡到始终存在的父元素，该元素将捕获并处理事件，而不是每次创建时都必须将其重新绑定到动态元素。

这看起来像

 $("body").on("click","#fluid-overlay",function() {
     //code goes here
    });