Adding event listener

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571

    Adding event listener

    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).

    Code:
    <input type = "text" id = "ID" 
      onKeyPress="this.value = this.value.toUpperCase(); return isId(event, this);"
      onChange="requestClient(); DataChanged()"
    />
    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.
    Code:
    <head>
     <script language="JavaScript">
     <!--
      function myStartUp(obj){
    	assignEventListeners();
      }
    //-->
    </script>
    
    </head>
    <body onLoad = "myStartUp(this);">
    ... other code ...
     <input type = "text" id = "ID" />
    ... other code ...
    </body>
    Here is how I create the event listeners in my .js library
    Code:
    //global object
    var g = {};
    
    function assignEventListeners(){
    	g.getClient = document.getElementById('ID');
    	if (g.getClient.addEventListener)
    	{
    			g.getClient.addEventListener("onChange",function(){requestClient();},false);
    	}
    
    	g.setToUpper = document.getElementById('ID');
    	if (g.setToUpper.addEventListener)
    	{
    		g.setToUpper.addEventListener("onKeyPress",
    										function()
    										{
    											this.value = this.value.toUpperCase(); 
    											return isId(event, this);
    										},
    									false)
    	}
    	return;
    }
    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?
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571

    #2
    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:
    Code:
    onKeyPress="this.value = this.value.toUpperCase(); return isId(event, this);"
    this
    Code:
    	g.setToUpper = document.getElementById('ID');
    	if (g.setToUpper.addEventListener)
    	{
    		g.setToUpper.addEventListener("keypress",
    										function(evt)
    										{
    											g.setToUpper.value = g.setToUpper.value.toUpperCase(); 
    											return isId(evt, g.setToUpper);
    										},
    									false)
    	}

    Comment

    • JKing
      Recognized Expert Top Contributor
      • Jun 2007
      • 1206

      #3
      The difference is that one is an HTML attribute and the other is a javascript event type.

      Have a look: DOM Events

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        I’m not sure why you need that global variable …

        Code:
        var el = document.getElementById('ID');
        // serve as XHTML and addEventListener() will work
        el.addEventListener("keypress", function (evt) {
            this.value = this.value.toUpperCase();
        }, false);
        // isId() needs to use "this"
        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.preventDefa ult()
        Last edited by Dormilich; Apr 27 '11, 07:58 AM.

        Comment

        • Claus Mygind
          Contributor
          • Mar 2008
          • 571

          #5
          Thanks that is just what I was looking for.

          Comment

          • Claus Mygind
            Contributor
            • Mar 2008
            • 571

            #6
            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

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694

              #7
              the problem with globals is that they can be edited (or deleted) everywhere. a forgotten var can thus cause havoc.

              Comment

              • Claus Mygind
                Contributor
                • Mar 2008
                • 571

                #8
                Thanks you make a good point. Another area where I need to expand my programming skills.

                Comment

                Working...