Qual é a melhor maneira de adicionar um evento em JavaScript?

StackOverflow https://stackoverflow.com/questions/34126

Pergunta

Eu vejo 2 formas principais para definir eventos em JavaScript:

  1. Adicione um evento diretamente dentro da tag assim:

    <a href="" onclick="doFoo()">do foo</a>

  2. Defini-los por JavaScript, assim:

    <a id="bar" href="">do bar</a>

e adicione um evento em um <script> seção dentro do <head> seção ou em um arquivo JavaScript externo, como que se você estiver usando prototypeJS:

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

Eu acho que o primeiro método é mais fácil de ler e manter (porque a ação JavaScript está diretamente vinculado ao link), mas não é tão limpo (porque os usuários podem clicar no link, mesmo se a página não estiver totalmente carregado, o que pode causar erros de JavaScript em alguns casos).

O segundo método é mais limpa (ações são adicionados quando a página é totalmente carregado), mas é mais difícil saber que uma ação está ligada à marca.

Qual método é o melhor?

Um assassino resposta vai ser totalmente apreciado!

Foi útil?

Solução

Na minha experiência, há dois pontos principais para isso:

1) A coisa mais importante é ser coerente.Eu não acho que nenhum dos dois métodos é necessariamente mais fácil para ler, enquanto você ficar com ele.Eu só fico confuso quando ambos os métodos são usados em um projeto (ou, pior ainda, na mesma página), porque então eu tenho que começar a procurar as chamadas e imediatamente não sabe para onde olhar.

2) O segundo tipo, isto é, Event.observe() tem vantagens quando o mesmo ou muito semelhante a ação é realizada em vários eventos, porque isso se torna óbvio quando todas as chamadas são no mesmo lugar.Também, como Konrad apontou, em alguns casos, esta pode ser tratada com uma única chamada.

Outras dicas

Eu acho que o primeiro método é mais fácil de ler e manter

Eu encontrei o oposto.Tenha em mente que, por vezes, mais do que um manipulador de eventos será vinculado a um determinado controle.

Declarar todos os eventos em um local central ajuda a organizar as ações realizadas no site.Se você precisar alterar algo que você não tem que procurar por todos os lugares fazendo uma chamada para uma função, você simplesmente tem que mudar em um só lugar.Quando a adição de mais elementos que devem ter a mesma funcionalidade que você não precise lembrar-se de adicionar os manipuladores para eles;em vez disso, é muitas vezes o suficiente para deixá-los declarar uma classe, ou até mesmo a não alterá-los a todos porque eles pertencem logicamente a um elemento de contêiner de que todos os elementos filho chegar com fios para uma ação.A partir de um código real:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

Isso wired um manipulador de eventos para todos os cabeçalhos de coluna em uma tabela para facilitar a tabela classificáveis.Imagino o esforço para tornar todos os cabeçalhos de coluna podem ser classificadas separadamente.

Eu acredito que o segundo método é preferível, porque ele mantém informações sobre a acção (i.e.o JavaScript) separado a partir da marcação da mesma maneira CSS separa a apresentação de marcação.

Eu concordo que isso torna um pouco mais difícil ver o que está acontecendo em sua página, mas boas ferramentas como o firebug vai ajudar você com isso um monte.Você também vai encontrar muito melhor suporte de IDE disponível se você manter a mistura de HTML e Javascript a um mínimo.

Esta abordagem realmente entrar em seu próprio como o projeto cresce, e você achar que você deseja anexar o mesmo de eventos de javascript para um monte de diferentes tipos de elementos em várias páginas diferentes.Nesse caso, torna-se muito mais fácil ter um único ritmo que une eventos, em vez de ter de procurar muitos diferentes arquivos HTML para localizar quando uma determinada função é chamada.

Você também pode usar addEventListener (não no IE) / attachEvent (IE).

Confira: http://www.quirksmode.org/js/events_advanced.html

Estes permitem que você anexe uma função (ou funções múltiplas) para um evento em um objeto DOM.Eles também têm a vantagem de permitir a onu-anexo posterior.

Em geral, se você estiver usando uma quantidade séria de javascript, pode ser útil para tornar a sua javascript legível, em oposição ao seu html.Então você poderia dizer que onclick=X no html é muito claro, mas isso é uma falta de separação de código -- outro sintáticas de dependência entre as peças-e um caso em que você tem para ler o html e o javascript para compreender o comportamento dinâmico da página.

Minha preferência pessoal é usar o jQuery no js externo de arquivos para que o js está completamente separado do html.Javascript deve ser discreto, de modo inline, ou seja, o primeiro exemplo) não é realmente a melhor escolha na minha opinião.Quando olhar para o html, o único sinal de que você está usando js deve ser o script inclui na cabeça.

Um exemplo de anexar (e manipulação) de eventos podem ser algo como isto

var myObject = {

    allLinkElements: null,  

    init: function()
    {
        // Set all the elements we need
        myObject.setElements();

        // Set event handlers for elements
        myObject.setEventHandlers();
    },

    clickedLink: function()
    {
        // Handle the click event
        alert('you clicked a link');
    },

    setElements: function()
    {
        // Find all <a> tags on the page
        myObject.allLinkElements = $('a');

        // Find other elements...
    },

    setEventHandlers: function()
    {
        // Loop through each link
        myObject.allLinkElements.each(function(id)
        {   
            // Assign the handler for the click event
            $(this).click(myObject.clickedLink);
        });

        // Assign handlers for other elements...
    }
}

// Wait for the DOM to be ready before initialising
$(document).ready(myObject.init);

Eu acho que esta abordagem é útil se você deseja manter todos os seus js organizada, como você pode usar objetos específicos para tarefas e tudo está bem contido.

É claro, o enorme benefício de deixar jQuery (ou outro bem conhecido biblioteca) fazer o trabalho duro é que cross-browser suporte é (em grande parte) cuidado do que torna a vida muito mais fácil

Bibliotecas como a YUI, jQuery e php fornecer métodos para adicionar eventos só quando o DOM está pronto, que pode ser antes de janela.onload.Eles também asseguram que você pode adicionar vários manipuladores de eventos para que você possa utilizar scripts a partir de diferentes fontes, sem a diferentes manipuladores de eventos substituir uns aos outros.

Assim, sua prática escolhas são;

Um.Se o script é simples e o único que nunca vai executar na página, criar uma função de inicialização da seguinte forma:

window.onload = function () {
    init();
}
function init() {
    // actual function calls go here
    doFoo();
}

Duas.Se você tem muitos scripts ou plano de fazer um mashup de scripts a partir de diferentes fontes, uso da biblioteca e dos seus onDOMReady método para adicionar com segurança seus manipuladores de eventos

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top