Funkcja przestrzeni nazw w jQuery

Question

Jaka jest różnica między tymi dwoma kawałkami kodu? Oba działają doskonale, więc po co używać .dropdown.data-api w funkcji? Czytałem o przestrzeni nazw w Internecie, ale nie jestem tego pewien. Czy ktoś może mi powiedzieć, jakie jest użycie funkcji przestrzeni nazw?

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

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

Answer 1

Porządkowanie wydarzenia umożliwia kierowanie na określone wydarzenie, jeśli chcesz, powiedzmy, odłączyć lub wyzwolić.

Wyobraź sobie, że masz dwa zdarzenia tego samego rodzaju powiązane z tym samym elementem (elementami).

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

Ponieważ nie nazwaliśmy żadnego z tych wydarzeń, teraz trudno jest się rozłączyć lub wyzwolić jedno, ale nie drugie. Rozważmy teraz:

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

Ponieważ tym razem każde zdarzenie ma własną przestrzeń nazw, możemy teraz wywołać lub rozpiąć jedną lub drugą stronę, pozostawiając drugą nietkniętą.

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

[EDIT - jak słusznie zaznacza @jfrej poniżej nazw znaczy, że czasem nie trzeba nawet odwoływać się do nazwy typu wydarzenie. Więc jeśli miałeś zdarzenie mouseover i kliknięcie zarówno w pojedynczym obszarze nazw, możesz odłączyć oba z off('.namespace').]