jQuery中如何触发click.ui-foo事件？与普通click事件有何区别？

问题复现代码 #

<div class="ui-foo"> </div>
<div id="foo-trigger"> </div>

<script>
$("#foo-trigger").on("click.ui-foo", function() { alert("clicked"); });
</script>

用户手动点击元素时没有触发弹窗，和事件带不带ui-foo命名空间没有任何关系，优先排查以下问题：

• 确认jQuery库在绑定代码执行前已经完成加载，浏览器控制台无$ is not defined类报错
• 确认事件绑定代码执行时，id="foo-trigger"的元素已经存在于DOM树中：如果绑定代码写在元素DOM节点的前面，必须把绑定逻辑放在DOM就绪回调中：

// DOM全量加载完成后再执行绑定
$(function() {
  $("#foo-trigger").on("click.ui-foo", function() { 
    alert("clicked"); 
  });
});

• 如果#foo-trigger是页面加载完成后动态插入的元素，不能直接绑定事件，需要用事件委托，绑定到已经存在的静态父节点上：

// 优先选择离目标元素最近的静态父元素，不必全委托到document
$(document).on("click.ui-foo", "#foo-trigger", function() {
  alert("clicked");
});

如果需要通过代码手动触发绑定的事件，有两种写法：

• 触发元素上所有绑定的click事件（包含普通click、所有命名空间下绑定的click回调）：$("#foo-trigger").trigger("click")
• 仅触发ui-foo命名空间下绑定的click事件，不触发其他click逻辑：$("#foo-trigger").trigger("click.ui-foo")

click.ui-foo不是独立的特殊事件类型，本质还是浏览器原生的click事件，.ui-foo是jQuery提供的事件命名空间标记，和无命名空间的普通click事件核心差异集中在事件管理的粒度上：

• 解绑精度不同
  绑定普通click事件后，调用$("#foo-trigger").off("click")会把该元素上所有绑定的click回调全部移除，很容易误删其他业务线、第三方组件绑定的逻辑。带ui-foo命名空间的事件支持精准解绑，仅需要执行$("#foo-trigger").off("click.ui-foo")，就可以移除当前命名空间下的click回调，完全不影响同元素上其他click事件的正常执行。
• 触发精度不同
  执行trigger("click")会按绑定顺序触发该元素上所有的click回调；执行带命名空间的trigger("click.ui-foo")只会触发对应命名空间下的click回调，适合做定向事件触发，不会干扰其他同类型事件的逻辑。
• 适用场景不同
  无命名空间的普通click适合页面简单业务逻辑的快速绑定；带命名空间的事件更适合通用组件、jQuery插件开发：组件内部所有绑定的事件统一加上专属命名空间，组件销毁时可以一次性解绑该命名空间下的所有事件，不需要逐个追踪绑定的元素和事件类型，既不会造成内存泄漏，也不会误解绑页面上的其他逻辑，示例代码如下：

// 组件内所有事件统一加.ui-foo命名空间标记
$("#foo-trigger").on("click.ui-foo", () => { /* 组件点击相关逻辑 */ });
$("#foo-input").on("focus.ui-foo blur.ui-foo", () => { /* 组件输入框相关逻辑 */ });

// 组件销毁时，一键移除所有组件绑定的事件
$(document).off(".ui-foo");

内容的提问来源于stack exchange，提问作者eastwater