更好地了解jQuery event.namespace [英] understanding jQuery event.namespace better

问题描述

请考虑以下摘要

$("#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 事件时触发吗?

When atc-button is clicked , why above listener fires? Shouldn't it fire only when we manually trigger click.hctpAttach event?

推荐答案

的jQuery文档.绑定 指出

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

If the eventType string contains a period (.) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call .bind( "click.name", handler ), the string click is the event type, and the string name is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of .unbind() for more information.

在上面的代码中，您将 click 事件绑定到了以 hctpAttach 作为名称空间的#atc-button 按钮，因为这两个带有句点字符的字符串.

In your above code, you are binding the click event to the #atc-button button with hctpAttach as the namespace because you separated the two strings with a period character.

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

You can use event.namespace to get the namespace of the event when it is triggered. This property is only available when the event is triggered using jQuery's .trigger() method; otherwise it is undefined.

您可以使用事件的名称空间 取消绑定 或 trigger 特定事件处理程序.

You can use the event's namespace to unbind or trigger specific event handlers for an event, not all.

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

Note that you should now use the .on() method instead of .bind().

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

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

带有 .bind()和 .unbind()的示例(不推荐):

Example with .bind() and .unbind() (not recommended):

$('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()的示例(推荐):

Example with .on() and .off() (recommended):

$('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>

这篇关于更好地了解jQuery event.namespace的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！