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绑定了两个事件侦听器。第一个使用resize()函数，第二个使用bind()，两者基本相同。第三种选择是使用on()。

惟一的区别是您为第二个侦听器提供了一个名为test的namespace，在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.

Answer 2

当触发resize事件时，它将开始处理您绑定到它的所有操作。

您可以将任意多个函数绑定到一个事件。

jQuery事件声明(resize.whatevername)允许您提供一个名称空间，以便稍后解除绑定：

$(window).unbind('resize.test')

但它仍然绑定到resize事件