javascript - 如何在 Jquery 或 jJavascript 中将三个事件绑定到同一个函数？

Question

谁能解释三个事件如何绑定到同一个函数？即当以下事件发生时应该调用相同的函数。

• 窗口卸载。
• 按“ESC”按钮。
• 单击“关闭”类。

我已经通过以下方式编写了单击“.close”类的函数：

<script>
$(document).ready(function() {
    var start = new Date().getTime();
    var starttime = new Date(start);
    $(".close").click(function () {
        jwplayer('mediaplayer').stop();
        end = new Date().getTime();
        endtime = new Date(end);            
        $.ajax({ 
          url: "/courses/136",
          data: {'timeSpent': endtime - starttime},
        });
    });

  });
</script>

window.unload()按下ESC按钮时应该发生同样的事情。有没有为此的任何 Jquery 方法。

Answer 1

创建一个负责处理事件的函数，然后您只需将该函数传递给您要执行的每个事件。

<script>
  $(document).ready(function() {
    var start = new Date().getTime();
    var starttime = new Date(start);

    var eventHandler = function (event) {
        jwplayer('mediaplayer').stop();
        end = new Date().getTime();
        endtime = new Date(end);            
        $.ajax({ 
          url: "/courses/136",
          data: {'timeSpent': endtime - starttime},
        });
    };

    $(".close").click(eventHandler);
    $(window).on("unload", eventHandler);
    $(document).on("keydown", function(e) {
        if (e.which == 27) {
            eventHandler(e);
        }
    });
  });
</script>

Answer 2

您只需定义函数：

function handler() {
    jwplayer('mediaplayer').stop();
    end = new Date().getTime();
    endtime = new Date(end);            
    $.ajax({ 
      url: "/courses/136",
      data: {'timeSpent': endtime - starttime},
    });
}

...并绑定它三遍；对于 ESC 键部分，您可能需要一个包装器：

$(".close").click(handler);
$(window).on("unload", handler);
$(document).on("keydown", function(e) { // Or whatever element is relevant
    if (e.which == 27) {
        handler.call(this, e);          // With the above, just `handler();` would work too
    }
});

Answer 3

传递给 jQuery 方法的函数.click()不必是匿名的。您可以按名称引用函数。所以：

function yourFunction() {
   // do your jwplayer and ajax thing here
}

$(window).on("unload", yourFunction);
$(".close").click(yourFunction);
$(document).on("keyup", function(e) {
  if (e.which == 27)
    yourFunction();
});