title: Can't remove event listener
body: <p>Can anyone tell why <code>bt2</code> event listener is not getting removed in <code>if</code> block. As when I remove the event listener in the <code>p</code> function, it's getting removed without any error or bug. I am pretty sure there might be any stack or scope problem due to which event listener is not getting removed but I can't figure out what that could be. And I know that event listener is not getting removed as with the succeeding clicks on <code>bt2</code> element all the preceding event listeners are also running again, as the same function is running multiple times. Please tell me what's the problem. </p>
  
  <p>Here's the full code:</p>
  
  <pre><code>    (function()
      {
          if(window.addEventListener) window.addEventListener('load',init,false);
          function init()
          {   var i=0;
              var get=document.getElementById('bt1').addEventListener('click',function() { pro(0);},false);
  
              function pro(x)
              {   alert('yeah');
                  if(!x) x=0
                  if(x!=0) //I dont want to remove event listener in the first time , so i want it to function with the next call to pro,in which the value of x is bigger than 0                
  {
                      //alert('right'); 
                        document.getElementById('bt2').removeEventListener('click',p,false); //event listener is not getting removed .
                  }
                  document.getElementById('bt2').innerHTML='this is a button '+x;
                  function passTo(y)
                  {   
                      pro(y);     
                  }
                  document.getElementById('bt2').addEventListener('click',p,false);
                  function p()
                  {   //document.getElementById('bt2').removeEventListener('click',p,false); //here the event listener is getting removed easily
                      passTo(x+1);
                  }
  
              }
          }
      }());
  </code></pre>