Es muy fácil agregar un detector de eventos en jQuery. Es igualmente fácil eliminar un detector de eventos. Es posible que desee eliminar un oyente porque ya no le interesa realizar ninguna acción en ese evento, para reducir el uso de memoria, o ambos. Pero digamos que ha adjuntado varios oyentes al mismo evento. ¿Cómo eliminas solo uno de ellos? El espacio de nombres puede ayudar.
Veamos el código.
$("#element")
.on("click", doSomething)
.on("click", doSomethingElse);Ambos doSomething y doSomethingElse se disparará cuando se haga clic en el elemento que hemos seleccionado. Eso es bueno. Es una ventaja de usar jQuery para vincular eventos en lugar de la súper vieja escuela onclick que sobrescribiría los controladores de eventos declarados previamente.
Ahora supongamos que desea eliminar el primero de esos oyentes de eventos, el que activa doSomething. ¿Cómo haces eso?
$("#element").off("click");Cuidado, eso desvinculará a ambos manipuladores, lo cual no es lo que queremos.
Afortunadamente, jQuery tomará el mismo segundo parámetro con .off() como lo hace con .on().
$("#element").off("click", doSomething);Eso es genial si tiene una referencia a una función real que puede pasar como ese parámetro. Pero, ¿y si no tienes esa referencia? O porque no sabe qué es o porque usó una función anónima como controlador, como este:
$("#element")
.on("click", function() {
console.log("doSomething");
});¿Cómo desvincular ese de una manera segura que no desvinculará accidentalmente a otros controladores de clics? ¡Eventos con espacio de nombres!
En lugar de solo click como nombre del evento, puede utilizar click.namespace.
$("#element")
.on("click.myNamespace", function() {
console.log("doSomething");
});Ahora puedes usar .off() con ese nombre de evento exacto para desvincularlo.
$("#element").off("click.myNamespace");Solo una de esas cosas interesantes y útiles en jQuery. Incluso con la vinculación de eventos moderna utilizando addEventListener y removeEventListener esto sería un poco complicado (creo).
Lo usé recientemente en ese marcador que hice para probar la longitud de la línea. Básicamente quería unir un mouseenter evento en cada elemento de la página (usando la delegación) y luego, cuando se hace clic en uno, desvincula ambos eventos. Pero quería tener cuidado de no desatar nada que no me atara a mí mismo. ¡Por lo tanto, espacio de nombres!
¿Quieres aprender más sobre jQuery? Tengo un curso completo disponible.