Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, é a minha primeira vez aqui.
Tenho procurado muito a resposta para o meu problema, mas talvez por ser óbvio, não encontrei solução satisfatória.
Eu tenho o seguinte código usando "No wrap - In body":
JSFiddle
A ideia é que ao clicar num botão a respectiva lista de opções apareça logo abaixo, mas estou com problemas pois não entendo muito bem
os métodos:
onLoad
onDomReady
no wrap in head
no wrap in body
Gostaria de seguir a w3c e não colocar o script no <body>, e utilizar uma função que receba a classe como parâmetro, assim não vou precisar escrever a mesma função para todos os botões. No entanto, quando a modifico ela para de funcionar, agindo apenas no carregamento da página quando no modo "No wrap in body" e não mais no evento do botão, como no código a seguir:
Descobri que um dos problemas é o modo de chamar a função no "addEventListener",que no meu cado deve ficar assim:
artes.addEventListener('click', function(){mudar('lista_de_artes');}, false);
Mas ainda fica a questão, vou sempre ter que usar essa linha para prepara o DOM quando usar "addEventListerner"?
document.addEventListener('DOMContentLoaded', load, false);
Alguém pode me explicar o que está acontecendo?
Mas é esse o caso, é funcionamento é obrigatório com inserção entre o <body></body>?
<body>
... todo o teu site aqui
..
..
..
..
<script></script> <-- aqui a tag script
</body>Refaz a pergunta, pq acho que não entendi então a dúvida.
Sou novo em JS, então me esforçarei pra expressar o problema.
Entendi as questões do "onLoad", "onDOMready"...
O primeiro problema é o seguinte:
mudar = function() {
var artes = document.getElementById('artes');
artes.addEventListener('click', mudar, false);
var lista = document.getElementsByClassName('lista_de_artes')[0].style.display;
if (lista == 'inline') {
document.getElementsByClassName('lista_de_artes')[0].style.display = 'none';}
else {
document.getElementsByClassName('lista_de_artes')[0].style.display = 'inline';
}
}
load = function() {
var artes = document.getElementById('artes');
artes.addEventListener('click', mudar, false);
}
document.addEventListener('DOMContentLoaded', load, false);
e gostaria que ele fosse chamado no <head> e não no <body>, daí acrescentei essa ultima linha que, acredito eu, espera o carregamento do DOM, e quando a tiro o código para de funcionar. A questão é que gostaria de deixar o código não obstrusivo, sem nenhuma chamada js direta no html, no entanto não compreendi como os eventos (addEventListener) estão relacionados com a posição em que o script é adicionado no escopo da página.Certo, a última linha:
document.addEventListener('DOMContentLoaded', load, false);você realmente precisa dela.
Agora vamos aos pontos:
1. Deixar os scripts dentro do head é um erro. Pois lá dentro você atrapalha o render da página, já que nenhum HTML será processado até o script ser todo parseado, por isso é mais indicado por questões de performance, deixar a tag script onde eu mostrei, antes do fechamento do </body>.
2. Você "precisa", dessa linha que aguarda o evento "dom carregado", porque só é possível manipular um elemento depois dele existir! ou seja, se você tentar colocar um evento num elemento que não existe na página, não vai dar, porque ele não existe. E o evento DOMContentLoaded, é exatamente isso: só execute quando o DOM estiver pronto.
3. Não deixe tags scripts no HEAD.
onLoad -> quando TUDO estiver carregado (DOM, recursos externos(css, js), imagens).
onDomReady -> quando o DOM estiver pronto. (Ocorre antes do onLoad, pois só espera o DOM, e não as outras coisas).
Coloque a tag script antes do fechamento da tag </body>, logo antes dela.
Assim vc "não precisa" do onLoad e nem do onDomReady.