3

Estou estudando sobre eventos no javascript, sem utilizar jQuery, e me surgiu uma dúvida: como consigo adicionar / remover eventos com namespace?

2 Respostas 2

2

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>

2
  • E para remover, por exemplo, os eventos com o namespace .something, é possível?
    – Oeslei
    Commented 22/01/2015 às 23:00
  • @Oeslei então só precisas de usar removeEventListener e referenciar a funcão. (jsfiddle.net/3hep98p6/1)
    – Sergio
    Commented 22/01/2015 às 23:03
1

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .