Como definir o atributo OnClick com a função de Valor contendo no IE8?

Question

Meu objetivo é mudar o onclick atributo de um link. Eu posso fazer isso com sucesso, mas o link resultante não funciona no IE8. Funciona no FF3.

Por exemplo, isso funciona no Firefox 3, mas não no IE8. Por quê?

<p><a id="bar" href="#" onclick="temp()">click me</a></p>

<script>
    doIt = function() {
        alert('hello world!');
    }
    foo = document.getElementById("bar");
    foo.setAttribute("onclick","javascript:doIt();");
</script>

Answer 1

Você não precisa usar o SetAttribute para isso - este código funciona (IE8 também)

<div id="something" >Hello</div>
<script type="text/javascript" >
    (function() {
        document.getElementById("something").onclick = function() { 
            alert('hello'); 
        };
    })();
</script>

Answer 2

Sua melhor aposta é usar uma estrutura JavaScript como jQuery ou protótipo, mas, não, você deve usar:

if (foo.addEventListener) 
    foo.addEventListener('click',doit,false); //everything else    
else if (foo.attachEvent)
    foo.attachEvent('onclick',doit);  //IE only

editar:

Além disso, sua função está um pouco fora. deveria ser

var doit = function(){
    alert('hello world!');
}

Answer 3

Você também pode definir o OnClick para chamar sua função assim:

foo.onclick = function() { callYourJSFunction(arg1, arg2); };

Dessa forma, você também pode passar argumentos. .....

Answer 4

Você também pode usar:

element.addEventListener("click", function(){
    // call execute function here...
}, false);