Não sei se "caminho" é a melhor definição. Mas, usando o QuerySelector
é possível obter um elemento especificando um "caminho", como por exemplo:
main section.sobre .view-more
Mas, como posso fazer o oposto?
Se eu tiver um elemento, como <button class="view-more">
, como posso fazer para verificar se ele é o main section.sobre .view-more
?
A única forma que encontrei seria fazer um QuerySelector
e então comparar este elemento com o elemento atual:
window.document.addEventListener("click", function(e) {
[].forEach.call(window.document.querySelectorAll("main section.sobre .view-more"), function(el) {
if (el == e.target) {
window.console.log("Isso é o main section.sobre .view-more");
}
});
}, true);
<html lang="en">
<body>
<main>
<section class="sobre">
<button class="view-less">View Less</button>
<button class="view-close">View Less</button>
<button class="view-more">View More</button>
<button class="view-more">View More</button>
</section>
</main>
</body>
</html>
O problema é se for buscar por vários "caminhos" terá que executar vários querySelectorAll
. Isso é, se quiser saber se o elemento é main .a
, main .b
, main .c
, main .d
, teria que fazer um querySelectorAll
para cad um, então comparar. Isso ainda piora se houverem múltiplos elementos com o mesmo "caminho", como o caso acima, já que terá que iterar pelo próprio querySelectorAll
.
Isso funciona, mas não me parece correto. Existe outra forma, mais eficiente e nativa, de atingir esse objetivo?
mapa map[caminho]Listener(e dom.Event)
, por página. Então bastaria fazer dentro do único EventListener umif listen, ok := mapa[caminho(event)]; ok { listen(event) }
. Isso é usa o listenner do elemento, previamente definido.