javascript - Jquery resize() api 混淆

Question

以下 jquery 代码显示两个 alert() 框。为什么？

$(window).resize(function(){
alert("called-1"); 
});

$(window).bind("resize.test",function(){
  alert("called-2");
});

我的问题是为什么 Jquery 在 resize() 触发后调用自定义事件(即事件名称以“resize”开头)？

jQuery 版本:1.12.4

Answer 1

您的示例代码为 resize 绑定(bind)了两个事件监听器。第一个使用 resize()功能和第二个用途bind() ，两者基本相同。第三种选择是使用 on() .

唯一的区别是你给了第二个听众一个namespace称为 test，在 event name 和 namespace 之间用点 (.) 分隔。但这仍然是一个 resize 事件监听器，而不是自定义事件!

命名空间可帮助您分离或分组事件监听器。例如，您可以删除特定的监听器:

$(window).on("resize", function() {
    console.log("- resize");
});

$(window).on("resize.test", function() {
    console.log("- resize.test");
});

// trigger resize
console.log("first trigger:");
$(window).trigger("resize");

// remove all listeners with '.test' namespace
$(window).off(".test"); // or more specific: $(window).off("resize.test");

// trigger resize again
console.log("second trigger:");
$(window).trigger("resize");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Official event.namespace doc.