How to remove an event listener

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571
    #1

    How to remove an event listener

    I am using FireFox only

    I am attaching a eventListner to a <span id="someId"> </span> tag


    I am trying to add and remove eventListners on the fly.

    I have no problem adding the listner, which I do like this:

    Code:
    			
this.chkStat = function (lbl, elm, newValue)
{
  if (newValue == elm.value)
  { 
        //no listner attached if the values are the same
	lbl.className = "myLowlight";
  }else{
        //listner attached if values not the same
	lbl.className = "myHighlight";

	if (lbl.addEventListener)
	{
          lbl.addEventListener("mousedown",
			function(evt)
			{
	 		  showRealValue(this, elm.id, newValue);
			},
			false)
	};

  }
}
    When the user clicks on the label <span>, they may choose to update the adjacent field with the new value. At this point I want to remove the listner

    I tried the following:
    Code:
    	lbl.removeEventListener('click', showRealValue, false);
    It did not remove the listner. Also when I displayed the next record. the old listner with the old values stayed active. Plus the next record's new value was added.

    I basically just need to figure out how to remove the eventListner I added on the fly.

    I tried to follow the example give at https://developer.mozilla.org/en-US/...eEventListener

    with no success.

    This may not be enough info, so if you think you can help but need further clarification just say so.
    Tags: None
    • Rabbit
      Recognized Expert MVP
      • Jan 2007
      • 12517
      #2
      A few things.

      1) The event you added is mousedown but the event you're trying to remove is click. They are not the same thing.

      2) The function you added is not called showRealValue. That is merely a function that you call in the function that the event listener uses. If you followed the example, you would have assigned your unnamed function to a variable and then used the variable to add/remove the function.

        Comment

        • Claus Mygind
          Contributor
          • Mar 2008
          • 571
          #3
          First item was just a copy and paste error, I do use the same event. I was just playing with both types.

          Second item. Thanks for the clarification. This was just what I needed to solve the problem. I did not make that connection with the anonymous function assignment.

            Comment

            • Sherin
              New Member
              • Jan 2020
              • 77
              #4
              Try This Code

              Code:
              <html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
}
</style>
</head>
<body>

<div id="myDIV">
  <p>Click the button to remove the DIV's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Try it</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

                Comment

                Previous template Next
                Working...