Question

请考虑以下摘要

$("#atc-button").bind("click.hctpAttach", function (e) {
        console.log("Add to cart button clicked.")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="atc-button">Button</button>

当点击atc-button时，为什么上面的监听器会触发？它不应该仅在我们手动触发click.hctpAttach事件时触发吗？

Answer 1

.bind的jQuery文档指出

如果eventType字符串包含一个句点（。）字符，则该事件被命名空间。句点字符将事件与其名称空间分开。例如，在调用.bind（“ click.name”，handler）中，字符串click是事件类型，字符串名称是名称空间。使用命名空间，我们可以取消绑定或触发某种类型的事件而不会影响其他事件。有关更多信息，请参见.unbind（）的讨论。

在上面的代码中，您将click事件绑定到#atc-button按钮到hctpAttach按钮，因为您用句点字符分隔了两个字符串。

触发事件时，可以使用event.namespace获取事件的名称空间。仅当使用jQuery的.trigger()方法触发事件时，此属性才可用。否则它是不确定的。

您可以使用事件的名称空间为某个事件（并非全部）unbind或trigger特定的事件处理程序。

请注意，您现在应该使用.on()方法而不是.bind()。

自jQuery 3.0起，.bind（）已被弃用。自jQuery 1.7起，它已被.on（）方法所取代，该方法用于将事件处理程序附加到文档，因此已经不鼓励使用它。

带有.bind()和.unbind()的示例（不推荐）：

$('p').bind('click', function(e){
   alert("Normal click event handler");
});
$('p').bind('click.custom', function(e){
  alert("Custom click event handler");
});
$('#unbind').click(function(e){
  $('p').unbind('click.custom');
});
$('#bind').click(function(e){
  $('p').unbind('click.custom');
  $('p').bind('click.custom', function(e){
     alert("Custom click event handler");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Paragraph---Click here!</p>
<button id="unbind">Unbind click.custom </button>
<br/>
<button id="bind">Bind click.custom </button>

带有.on()和.off()的示例（推荐）：

$('p').on('click', function(e){
   alert("Normal click event handler");
});
$('p').on('click.custom', function(e){
  alert("Custom click event handler");
});
$('#unbind').click(function(e){
  $('p').off('click.custom');
});
$('#bind').click(function(e){
  $('p').off('click.custom');
  $('p').on('click.custom', function(e){
     alert("Custom click event handler");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Paragraph---Click here!</p>
<button id="unbind">Unbind click.custom </button>
<br/>
<button id="bind">Bind click.custom </button>

Answer 2

jQuery Doc：

从 jQuery 3.0 开始，.bind（）已弃用。被它取代 .on（）方法，用于将事件处理程序附加到文档，因为 jQuery 1.7，因此不鼓励使用它。对于早期版本， .bind（）方法用于直接附加事件处理程序到元素。处理程序将附加到当前选择的元素中 jQuery对象，因此必须这些元素必须存在于调用点 .bind（）发生。

jQuery event.namespace属性

定义和用法

event.namespace属性在以下情况下返回自定义名称空间：   事件已触发。

插件作者可以使用此属性来处理任务   取决于所使用的名称空间。

提示：以下划线开头的命名空间为jQuery保留。

示例

添加和删除自定义名称空间：

<select id="month" class="_5dba" title="Month" name="birthday_month" aria-label="Month">
    <option value="0">Month</option>
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option selected="1" value="8">Aug</option>
    <option value="9">Sept</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
    <option value="13">Dec</option>
    <option value="14">Jan</option>
    <option value="15">Jun</option>
</select>

source

Answer 3

来自doc。

如果eventType字符串包含句点（。）字符，则该事件将被命名空间。

"click.hctpAttach"不是自定义事件，而是命名空间的本机DOM事件。因此，您基本上将本机DOM click事件处理程序附加到dom #atc-button。这将由浏览器触发，并手动触发。仅当您要取消绑定click特定类型的处理程序并触发某些类型的事件而不影响其他事件时，此功能才有用。

更好地了解jQuery event.namespace

3 个答案:

jQuery event.namespace属性

定义和用法

示例