Estou estudando sobre eventos no javascript, sem utilizar jQuery, e me surgiu uma dúvida: como consigo adicionar / remover eventos com namespace
?
2 Respostas
Uma opcão é usar attributos no elemento, e fazer tudo com campos data-
, usando seletores que adicionam event handlers aos elemento que têm um certo data-
e guardando aí a informacão específica a esse elemento.
Se quiseres replicar o conceito de namespace do jQuery então uma ideia aproximada podia ser assim:
(jsFiddle: http://jsfiddle.net/3hep98p6/)
function acionar(target, type) {
var doc = document;
var event;
if (doc.createEvent) {
event = new Event(type);
target.dispatchEvent(event);
} else {
event = doc.createEventObject();
target.fireEvent('on' + type, event);
}
};
var p = document.querySelector("p");
p.addEventListener("test.something", function (event) {
alert(event.type + ' - ' + this.innerHTML);
});
document.querySelector("button").addEventListener('click', function (event) {
acionar(p, "test.something");
});
<button>Carrega aqui para disparar um evento no elemento "p"</button>
<p>cobaia</p>
-
E para remover, por exemplo, os eventos com o namespace
.something
, é possível?– OesleiCommented 22/01/2015 às 23:00 -
@Oeslei então só precisas de usar
removeEventListener
e referenciar a funcão. (jsfiddle.net/3hep98p6/1)– SergioCommented 22/01/2015 às 23:03
Gostei da idéia do @Sergio, mas eu ainda não estava satisfeito. Eu gostaria de poder adicionar eventos nativos utilizando namespaces. Continuei pesquisando e analisei o código do jQuery novamente, mas eu continuo não entendendo o código para os eventos.
Tentei várias e várias vezes simular os namespaces até que cheguei em um script funcional. Ainda não tive a oportunidade de testar o suficiente, mas a idéia já está funcionando.
A lógica é mais ou menos a seguinte. Eu crio um array de objetos em cada elemento que eu adicionar eventos. Estes objetos possuem o evento adicionado, os namespaces e a função.
[
{
event: 'click',
namespaces: [
'someting',
'else'
],
handler: function
}
]
O array fica associado diretamente no node do elemento. Então, quando eu tentar remover o evento, eu consigo pesquisar nos elementos alvos pelos eventos / namespaces que desejo remover.
Coloquei o código que fiz no JSFiddle para quem tiver interesse em olhar o código.