javascript - jquery 插件中的 .on ("click.stupidtable") 是什么？

Question

click.stupidtable 在这里是什么意思:$table.on("click.stupidtable")？

和 $(this).stupidsort() :我认为 $(this) 会引用 $table 元素，所以插件被调用的元素，但随后它调用了 stupidsort()，所以我有点困惑:

(function($) {
  $.fn.stupidtable = function(sortFns) {
    return this.each(function() {
      var $table = $(this);
      sortFns = sortFns || {};
      sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns);
      $table.data('sortFns', sortFns);

      $table.on("click.stupidtable", "thead th", function() {
          $(this).stupidsort();
      });
    });
  };


  // Expects $("#mytable").stupidtable() to have already been called.
  // Call on a table header.
  $.fn.stupidsort = function(force_direction){

Answer 1

what does click.stupidtable means here : $table.on("click.stupidtable") ?

它正在连接一个命名空间事件处理程序；见on了解详情。这使得以后更容易删除处理程序，而不会干扰可能附加的其他 click 处理程序。

例如，考虑:

$("div").on("click", function() { alert("1"); });
$("div").on("click.foo", function() { alert("2"); });

如果我们单击它们运行时存在的任何 div，我们将看到这两个警报。然后我们可以使用命名空间仅取消 Hook 第二个:

$("div").off("click.foo");

现在我们只会看到 1 警报。

And $(this).stupidsort() : I thought $(this) would refer to the $table element...

不，在那段代码中 this 指的是 th 元素，所以 $(this) 在 周围创建了一个 jQuery 包装器日。请注意，该行位于此事件处理程序的内部:

$table.on("click.stupidtable", "thead th", function() {
    $(this).stupidsort();
});

由于事件处理程序是委托(delegate)的(有关详细信息，请参阅 on)，在回调中，this 将引用 th单击的元素。

so the element on which the plugin was called, but then it calls stupidsort(), so I am a bit confused

stupidsort 是一个插件，在后面的代码中定义； $(this).stupidsort() 只是调用插件，在被点击的 th 周围使用 jQuery 包装器。