468,457 Members | 1,602 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,457 developers. It's quick & easy.

How to remove an event listener

Claus Mygind
571 512MB
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:

Expand|Select|Wrap|Line Numbers
  1.  
  2. this.chkStat = function (lbl, elm, newValue)
  3. {
  4.   if (newValue == elm.value)
  5.   { 
  6.         //no listner attached if the values are the same
  7.     lbl.className = "myLowlight";
  8.   }else{
  9.         //listner attached if values not the same
  10.     lbl.className = "myHighlight";
  11.  
  12.     if (lbl.addEventListener)
  13.     {
  14.           lbl.addEventListener("mousedown",
  15.             function(evt)
  16.             {
  17.                showRealValue(this, elm.id, newValue);
  18.             },
  19.             false)
  20.     };
  21.  
  22.   }
  23. }
  24.  
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:
Expand|Select|Wrap|Line Numbers
  1.     lbl.removeEventListener('click', showRealValue, false);
  2.  
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.
Jul 15 '13 #1

✓ answered by Rabbit

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.

3 2827
Rabbit
12,512 Expert Mod 8TB
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.
Jul 15 '13 #2
Claus Mygind
571 512MB
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.
Jul 17 '13 #3
Sherin
77 64KB
Try This Code

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style>
  4. #myDIV {
  5.   background-color: coral;
  6.   border: 1px solid;
  7.   padding: 50px;
  8.   color: white;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13.  
  14. <div id="myDIV">
  15.   <p>Click the button to remove the DIV's event handler.</p>
  16.   <button onclick="removeHandler()" id="myBtn">Try it</button>
  17. </div>
  18.  
  19. <p id="demo"></p>
  20.  
  21. <script>
  22. document.getElementById("myDIV").addEventListener("mousemove", myFunction);
  23.  
  24. function myFunction() {
  25.   document.getElementById("demo").innerHTML = Math.random();
  26. }
  27.  
  28. function removeHandler() {
  29.   document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
  30. }
  31. </script>
  32.  
  33. </body>
  34. </html>
  35.  
Nov 23 '20 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Prasad Dannani | last post: by
7 posts views Thread by sanjana | last post: by
3 posts views Thread by Franco, Gustavo | last post: by
3 posts views Thread by Peter Oliphant | last post: by
2 posts views Thread by Jensen Hoh | last post: by
8 posts views Thread by moondaddy | last post: by
2 posts views Thread by saeed rezaei | last post: by
2 posts views Thread by Dinsdale | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.