javascript - 将函数用作 "on"事件？

Question

我目前有这个功能:

function highlightBoxes() {
  var windowStart = $(window).scrollTop();
  var windowEnd = windowStart + $(window).height();

  $('.box').each(function() {
    var box = $(this);
    var start = box.offset().top;
    var end = start + box.height();

    if (windowStart <= start && windowEnd >= end) {
      box.addClass('active');
    } else {
      box.removeClass('active');
    }
  });
}

highlightBoxes();
$(document).scroll(highlightBoxes);
$(window).resize(highlightBoxes);

它检查整个元素(在本例中为 .box)是否在 View 中 (jsfiddle)。但是，我希望能够将该函数用作 on 事件，这样我就可以将它用于许多不同的元素。像这样的东西:

$('.box').on('inview', function () {
    if (elementIsInView) {
        // make the box red
    } else {
        // make the box the original color
    }
});

我该怎么做？

Answer 1

使用 on 意味着您需要触发同名事件，一个 super 简单的版本是使用 document 作为消息总线，例如:

$(document).trigger('inview');

因此，在您的代码中，当您决定 inview 应该为真时，触发一个类似上述的事件，此时 on 事件将运行功能。

根据上面的代码，您可能希望将 if 语句移出 on 事件，实际上将其作为一个单独的函数运行。当 elementIsInView 返回 true 时，您可以触发 inview 事件。