Changing the onclick event in javascript

JavaScript
1

Hi people

I have the following code:


<script language="JavaScript">
function func1() {
     alert("func1 invoked");
}

function func2() {
     alert("func2 invoked");
}

function changeFunction() {
    var img = document.getElementById('img');
    if (window.addEventListener) { 	// Mozilla, Netscape, Firefox
       img.addEventListener('click', func2, false);
    }
    else {	// IE
       img.attachEvent('onClick', func2);
    }
}
</script>
<img id="img" src="test.jpg" width="10" height="10" onClick="func1();"></img>

when the image is clicked with the mouse, function func1 is invoked as expected.
When I call function changeFunction, I want to change the code that is invoked when the image is clicked from func1 to func2. Instead, both are invoked because addEventListener and attachEvent add an additional handler instead of setting one.
I am looking for a way to change the handler from one function to another.
Can anyone think of a solution probably using removeEventListener?

regards

2

Have you tried just setting any existing handler to null?

function changeFunction() {
    var img = document.getElementById('img');
    [B]img.onclick=null;[/B]

    if (window.addEventListener) { 	// Mozilla, Netscape, Firefox
       img.addEventListener('click', func2, false);
    }
    else {	// IE
       img.attachEvent('onClick', func2);
    }
}
3

the IE equivilent to removeEventListener is detachEvent.

if(element.detachEvent){
element.detachEvent(‘onclick’,functionref);
}
else if (element.removeEventListener){
element.removeEventListener(‘click’,functionref);
}
else element.onclick=‘’;