Ich versuche mehr als einen addEventListener zu erreichen, aber etwas stimmt nicht?

Zum Beispiel, wenn wir 3 Divs auf der Seite haben und der erste am Anfang angezeigt wird und die anderen beiden ausgeblendet sind.

<div id="d1">
<a onClick="
document.addEventListener("backbutton", show_div1, false); 
$('#d1').hide();  
$('#d2').show(); 
"
</a>
</div>

<div id="d2"></div> - initially hidden
<div id="d3"></div> - initially hidden

Es zeigt div 2, versteckt div 1 und setzt den Listener für den Zurück-Button auf show_div1 () und alles funktioniert in Ordnung. Beim Drücken der Zurück-Taste wird ein Alarm ausgegeben"Ich sollte # div1 zeigen", so wie es sollte(// $ ('# d1'). show (); wird kommentiert)

show_div1(){
//$('#d1').show(); $('#d2').hide(); 
alert ('I should show #div1');
}

Aber jetzt kommt das Problem

<div id="d2">
<a onClick="
document.removeEventListener("backbutton", show_div1, false);
document.addEventListener("backbutton", show_div2, false); 
$('#d2').hide();  
$('#d3').show(); 
"
</a>
</div>

Es wird sofort ausgelöst "Ich sollte # div2 zeigen"Auch die Zurück-Taste wird nicht gedrückt! addEventListener mag die gestartete Hauptfunktion show_div2 () und setzt den Listener nicht einfach auf die Zurück-Schaltfläche dieser Funktion.

show_div2(){
//$('#d2').show(); $('#d3').hide();
alert ('I should show #div2');
}

Was könnte der mögliche Grund dafür sein?