Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Epyllion

DHTML - Javascript e EventListeners

Por , em Javascript

Recommended Posts

Epyllion    0

Epyllion
Postado

Pessoal, boa tarde.

 

Iniciei, há pouco tempo, meus estudos em CSS, Ajax, Javascript Crossbrowser ....

 

Estava lendo o excelente tutorial do Élcio falando sobre DHTML Crossbrowser.

 

Nessa parte do tutorial ele fala sobre comportamento [Javascript], e a forma correta de se usar.

 

No exemplo 12 está a minha dúvida, o Javascript só funciona se vier após a declaração do elemento que está sendo referenciado na função que atribui o EventListener.

 

Por quê ?

 

Se usar assim, meu código fica "semânticamente" incorreto ?

 

Posso chamar um Javascript externo, fora da tag head do meu html ?

 

Muito obrigado pela ajuda. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

Do jeito que o script foi feito, só funciona se ele estiver depois do botão.

Se você deixar antes, o script vai procurar na página que ainda não foi carregada por completo, o elemento com id "b".. ou seja, quando ele procurar, ele não vai achar nada e vai dar erro.. pq o elemento ainda não foi criado..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Epyllion    0

Epyllion
Postado

Micox e Lex, muito obrigado.

 

Parece meio óbvio, mas não tinha entendido isso. Agora compreendi. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Se usar o Javascript antes do fim da página </body> ou antes do </html>; Das duas formas funcionam, mas :

 

- Isso está correto ? Visto que normalmente o Javascript é colocado entre as tags <head>.

 

- Essa é a forma correta de se usar o Javascript, certo ? Tendo em vista que desta forma, o não funcionamento do Javascript na página, não impederia a navegação.

 

- Qual desses dois é o mais indicado ?

 

Ainda estou meio perdido nessas questões de Padrões W3C, Tableless, CSS, DOM .... Mas chego lá .... :)

 

Obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Epyllion    0

Epyllion
Postado

Obrigado micox. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

A dúvida é exatamente essa: :)

 

- Já estou usando o Javascript separado;

- Já estou usando o EventListener, como havia dito no primeiro post.

 

O problema é que só funciona se "chamar" meu Javascript (que está em um arquivo externo), após o "load" do body (como ficou esclarecido por vocês ).

 

Dessas formas funcionam:

...páginascript type="text/javascript" src='arquivo.js'></script></body>

...página</body>script type="text/javascript" src='arquivo.js'></script></html>

- Qual dessas formas é a menos "incorreta" ? :D

 

Desculpe pela forma como me expressei erradamente no post anterior.

 

Obrigado pela ajuda, novamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Epyllion    0

Epyllion
Postado

Antes do body é melhor. Láaa no head.

Concordo com você, porém como fazer para funcionar se :

Se você deixar antes, o script vai procurar na página que ainda não foi carregada por completo, o elemento com id "b".. ou seja, quando ele procurar, ele não vai achar nada e vai dar erro.. pq o elemento ainda não foi criado..

Entendeu o problema ? Desculpe pela confusão .... :) Obrigado novamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ahhh. pensei que voce já tivesse sakado pelo seu post anterior.É o seguinte:A tag script que referencia seu javascript externo deverá ficar no head sim.Voce não deve deixar nenhuma rotina fora de funções no seu javascript (todas as rotinas devem estar encapsuladas em funções), a nao ser uma rotina que atribua uma função inicial ao body.vixe o que eu falei Ficou complicado.Na prática:1) coloque sua tab "<script src" no head2) não deixe nenhuma instrução javascript fora de funções3) crie uma função chamada init() e coloque dentro dela todas as funções iniciais4) no começo do seu script escreva "addEventListener(body,onload,init blablabla..." - pra adicionar a função init ao onload do body.sacou?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Epyllion    0

Epyllion
Postado

micox, muito obrigado. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Na primeira vez que tentei usar o código não estava funcionando, revisei, revisei e não funcionava de jeito nenhum. Fiz algumas pesquisas e finalmente encontrei o "erro".

 

É só trocar o body por window.

 

4) no começo do seu script escreva "addEventListener(body,onload,init blablabla..." - pra adicionar a função init ao onload do body.

addEventListener(window, 'load', funcao);
Muito obrigado pela ajuda e desculpe novamente por toda essa confusão. :)

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Opa. Ótimo então. Não tem porque se desculpar, não fez nada errado.Té mais...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Epyllion    0

Epyllion
Postado

Encontrei um problema ao fazer os eventos dessa forma.

 

Ao atribuir um evento para um formulário (usando o evento submit ou o evento click do botão submit) o formulário é enviado da mesma forma.

 

Por exemplo:

 

function Submeter() {

alert('Nao envidado');

return (false);

}

No Internet Explorer mostra a mensagem e não envia o formulário (isso que preciso), porém no Firefox mostra a mensagem e o formulário é enviado !

 

Se colocar o Javascript in-line no código HTML funciona nos dois navegadores:

 

onSubmit="return Submeter()"

Acredito que o problema esteja nesse return que tem na chamada da função diretamente no evento submit(onSubmit="return Submeter()). Como faço isso com EventListeners ?

 

Muito obrigado.

Abraço !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

Faça assim

function Submeter(e) {alert('Nao envidado');	if (e && e.preventDefault)		e.preventDefault();	return false;}
Veja mais

http://www.gerd-riesselmann.net/archives/2...-problem-solved

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito