By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,654 Members | 1,513 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,654 IT Pros & Developers. It's quick & easy.

Adding event listener

Claus Mygind
100+
P: 571
The event listeners I am adding do not seem to function when the event occurs. Using the inline javaScript method the events work fine (see below).

Expand|Select|Wrap|Line Numbers
  1. <input type = "text" id = "ID" 
  2.   onKeyPress="this.value = this.value.toUpperCase(); return isId(event, this);"
  3.   onChange="requestClient(); DataChanged()"
  4. />
  5.  
I want to add the event listeners as suggested by Dormilich. Which with the help of Dormilich, I was able to do on a form I create on the fly. See http://bytes.com/topic/javascript/an...ll#post3657732.

Now I am trying to add more to other controls on my form. Here is my code.

Here is the basic form with same control example as above. I want to hook the two event listeners (see code above) to the "ID" input box. The onload event handler for the body works fine and fires after the page has loaded.
Expand|Select|Wrap|Line Numbers
  1. <head>
  2.  <script language="JavaScript">
  3.  <!--
  4.   function myStartUp(obj){
  5.     assignEventListeners();
  6.   }
  7. //-->
  8. </script>
  9.  
  10. </head>
  11. <body onLoad = "myStartUp(this);">
  12. ... other code ...
  13.  <input type = "text" id = "ID" />
  14. ... other code ...
  15. </body>
  16.  
Here is how I create the event listeners in my .js library
Expand|Select|Wrap|Line Numbers
  1. //global object
  2. var g = {};
  3.  
  4. function assignEventListeners(){
  5.     g.getClient = document.getElementById('ID');
  6.     if (g.getClient.addEventListener)
  7.     {
  8.             g.getClient.addEventListener("onChange",function(){requestClient();},false);
  9.     }
  10.  
  11.     g.setToUpper = document.getElementById('ID');
  12.     if (g.setToUpper.addEventListener)
  13.     {
  14.         g.setToUpper.addEventListener("onKeyPress",
  15.                                         function()
  16.                                         {
  17.                                             this.value = this.value.toUpperCase(); 
  18.                                             return isId(event, this);
  19.                                         },
  20.                                     false)
  21.     }
  22.     return;
  23. }
  24.  
References to the other functions in the eventListeners are the same in both the inline javaScript and eventListener so I know they function fine.

So why does the event not fire when they happen?
Apr 26 '11 #1

✓ answered by Claus Mygind

So I think I have the answer, but I sure would like to find the documentation on it so I can see a complete list.

In moving the inline javaScript from HTML tags into an event listener I have to change the name of the event. For example:

"onClick" becomes "click"
"onChange" becomes "change"

that becomes:
Expand|Select|Wrap|Line Numbers
  1. onKeyPress="this.value = this.value.toUpperCase(); return isId(event, this);"
  2.  
this
Expand|Select|Wrap|Line Numbers
  1.     g.setToUpper = document.getElementById('ID');
  2.     if (g.setToUpper.addEventListener)
  3.     {
  4.         g.setToUpper.addEventListener("keypress",
  5.                                         function(evt)
  6.                                         {
  7.                                             g.setToUpper.value = g.setToUpper.value.toUpperCase(); 
  8.                                             return isId(evt, g.setToUpper);
  9.                                         },
  10.                                     false)
  11.     }
  12.  

Share this Question
Share on Google+
7 Replies


Claus Mygind
100+
P: 571
So I think I have the answer, but I sure would like to find the documentation on it so I can see a complete list.

In moving the inline javaScript from HTML tags into an event listener I have to change the name of the event. For example:

"onClick" becomes "click"
"onChange" becomes "change"

that becomes:
Expand|Select|Wrap|Line Numbers
  1. onKeyPress="this.value = this.value.toUpperCase(); return isId(event, this);"
  2.  
this
Expand|Select|Wrap|Line Numbers
  1.     g.setToUpper = document.getElementById('ID');
  2.     if (g.setToUpper.addEventListener)
  3.     {
  4.         g.setToUpper.addEventListener("keypress",
  5.                                         function(evt)
  6.                                         {
  7.                                             g.setToUpper.value = g.setToUpper.value.toUpperCase(); 
  8.                                             return isId(evt, g.setToUpper);
  9.                                         },
  10.                                     false)
  11.     }
  12.  
Apr 26 '11 #2

JKing
Expert 100+
P: 1,206
The difference is that one is an HTML attribute and the other is a javascript event type.

Have a look: DOM Events
Apr 26 '11 #3

Dormilich
Expert Mod 5K+
P: 8,639
I’m not sure why you need that global variable …

Expand|Select|Wrap|Line Numbers
  1. var el = document.getElementById('ID');
  2. // serve as XHTML and addEventListener() will work
  3. el.addEventListener("keypress", function (evt) {
  4.     this.value = this.value.toUpperCase();
  5. }, false);
  6. // isId() needs to use "this"
  7. el.addEventListener("keypress", isId, false);
one of the important points is that you can attach multiple functions to an element without putting it all in one function.

PS. Event Listeners don’t return either, you have to use evt.preventDefault()
Apr 27 '11 #4

Claus Mygind
100+
P: 571
Thanks that is just what I was looking for.
May 2 '11 #5

Claus Mygind
100+
P: 571
Thanks for the additional tip. I know I don't need the one global variable/object. It just gives me one single place to examine the information I have created. I read about it in a thread I came across on the web and it seemed like a good idea. I find it useful that's all
May 2 '11 #6

Dormilich
Expert Mod 5K+
P: 8,639
the problem with globals is that they can be edited (or deleted) everywhere. a forgotten var can thus cause havoc.
May 2 '11 #7

Claus Mygind
100+
P: 571
Thanks you make a good point. Another area where I need to expand my programming skills.
May 6 '11 #8

Post your reply

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