Question

我正在尝试更好地了解jQueryUI插件的事件，例如http://api.jqueryui.com/autocomplete/。

例如，我有select（event，ui）事件。根据文档，似乎两位代码是相同的。正确的吗？

$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});

( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );

好的，我猜两者都将“autocompleteselect”事件的事件处理函数附加到所选元素。该文档还将“select”事件的“type”显示为“autocompleteselect”。但我认为事件名称是“选择”。是“选择”还是“自动完成选择”？请注意，我首先尝试通过jQueryUI源代码，但从不使用字符串“autocompleteselect”。 “autocompleteselect”定义在哪里？

我的下一个混淆源是我将代码置于与事件关联的匿名函数中。此代码是否始终先执行，然后是与even执行相关的任何其他默认插件代码？ event.preventDefault();还会阻止默认行为吗？

Answer 1

这是小部件工厂添加的功能。使用_trigger触发事件时，实际上会触发类型为widget name + type的事件。

例如：如果您要创建名称为mywidget的窗口小部件并在窗口小部件中触发事件，例如this._trigger('select')，则实际触发的事件将为mywidgetselect。

因此，如果您查看autocomplete源代码，可以看到this._trigger( "select", ...)在那里使用。

您还可以参考this blog了解更多详情

Answer 2

这两件事并不完全相同。他们只是做同样的事情;-)好吧，差不多。

首先，我需要解释一下理论：通常，在处理“异步”代码时，您有两个选择：回调和事件侦听器。回调是一个函数，在完成其他一些操作后由系统调用。通常，您可以配置对象或运行一个函数，并在发生事件时“启动”回调以启动。发生事件时，系统会调用事件侦听器。通常，您将一堆事件侦听器绑定到事件，而代码的其他部分可能会触发事件，从而触发所有侦听器函数。

如果您不熟悉事件和回调，则可能看不出差异。只要知道使用回调导致紧凑的“spaghetti”就像代码一样，另一方面使用监听器会导致灵活但难以阅读的代码。我认为最好的方法是将两者结合起来以获得最可读的代码。

在您的特定情况下，“select”是配置对象的一个属性，它指定一个回调函数。

“autocompleteselect”是事件的名称 - 您可以向该事件添加侦听器

$('.selector').on('autocompleteselect', doSomething);

或自己触发活动

$('.selector').trigger('autocompleteselect');

了解jQueryUI事件

2 个答案: