javascript add an event listener any time and remove the event listener any time

Question

Hi,

1. In a web page i have a button when clicked it calls a JavaScript function.
2. In that function i show a modal dialog box and i want to process keystrokes only at this time. That is when the modal dialog is visible.

3. When i close the modal dialog i want to stop the keystroke processing.

4. consider that i click a button and function sam() is called.

   function sam() { document.onkeypress = function(e) { processKeystroke(e); } }

5. So now a function is attached to the keypress event. when ever a key is pressed the function processkeystroke will be called. The function sam is called only after i display the modal dialog box.

6. Now i am closing the modal dialog and with that i dont want function(e) { processKes...} to be called.

7. What should i do to remove the attached event listener from document.onkeypress.

8. Also i would like to have alternatives for the above approach because that one i assumed of my own and i did not refer any specific documentation so i really going through trial and error procedure to use event handlers or listeners.

9. So when i call function sam i want a function to be attached with the keypress event and if i call another function form example closedialog() i want that keypress listening function to be removed. Because i want to write proper code which should not consume lots of system resources.

Answer 1

Just write the following code to remove the handler.

 document.onkeypress = null;

Since you are talking about attaching you maybe should check jquery which provides real bind (attach) and unbind (detach) for events like keypress.