Función de espacio de nombres en jQuery

Question

¿Cuál es la diferencia entre estos dos códigos? Ambos funcionan perfectamente, entonces, ¿por qué usar .dropdown.data-api en una función? Leí sobre el espacio de nombres en Internet, pero no tengo claro eso. ¿Alguien puede decirme cuál es el uso de las funciones del espacio de nombres?

$('html').on('click.dropdown.data-api', 
    function() { 
    $el.parent().removeClass('open') 
    }) 
} 

$('html').on('click', 
    function() { 
    $el.parent().removeClass('open') 
    }) 
} 

Answer 1

El espaciado de nombres de un nombre le permite enfocar un evento en particular si desea, por ejemplo, desvincularlo o activarlo.

Imagine que tiene dos eventos del mismo tipo vinculados al (los) mismo (s) elemento (s).

$('.something').on('click', function() { /* do something */ }); 
$('.something').on('click', function() { /* do something else */ }); 

Ya que no NAMESPACE cualquier caso, ahora es difícil para desenlazar o desencadenar una pero no la otra. Consideremos ahora:

$('.something').on('click.one', function() { /* do something */ }); 
$('.something').on('click.two', function() { /* do something else */ }); 

Debido a que este tiempo cada evento tiene su propio espacio de nombres, que ahora puede desencadenar o desenlazar una o la otra, dejando la otra intacta.

$('.something').off('click.one'); //unbind the 'one' click event 
$('.something').trigger('click.two'); //simulate the 'two' click event 

[EDITAR - como @jfrej derecha señala a continuación, espacios de nombres significan que a veces ni siquiera es necesario hacer referencia al nombre del tipo de evento. Por lo tanto, si tuviera un mouseover y haga clic en un evento en un solo espacio de nombres, podría desvincular ambos con off('.namespace').]