Adding event listener

571 512MB

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

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

Expand|Select|Wrap|Line Numbers

 
<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

Expand|Select|Wrap|Line Numbers

 
//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?

Apr 26 '11 #1

Subscribe Post Reply

✓ 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

 
onKeyPress="this.value = this.value.toUpperCase(); return isId(event, this);"

this

Expand|Select|Wrap|Line Numbers

 
    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)

    }

5609

Claus Mygind

571

512MB

Expand|Select|Wrap|Line Numbers

 
onKeyPress="this.value = this.value.toUpperCase(); return isId(event, this);"

this

Expand|Select|Wrap|Line Numbers

 
    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)

    }

Apr 26 '11 #2

JKing

1,206

Expert 1GB

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

8,658

Expert Mod 8TB

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

Expand|Select|Wrap|Line Numbers

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

Apr 27 '11 #4

Claus Mygind

571

512MB

Thanks that is just what I was looking for.

May 2 '11 #5

Claus Mygind

571

512MB

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

8,658

Expert Mod 8TB

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

571

512MB

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

May 6 '11 #8

Similar topics

Network event listener?

by: Neil Cherry | last post by:

I have to modifiy a program which uses a serial interface and event listeners. The modification entails adding support for connecting to a terminal server via an IP address and port number instead...

Java

Object method as event listener

by: Jeremy | last post by:

I want each instance of an object to be able to listen for input events. When the event occurs, a method of the object should be called, such that "this" is in scope and refers to the object...

Javascript

Is there an event listener for when the page starts loading?

by: Daz | last post by:

Hi, I am trying to find an event listener which will trigger when the pages starts loading, as opposed to when it's finished, or when the DOM content has finished loading. I am sure that such a...

Javascript

Opening a new window and attaching an onload event listener.

by: Daz | last post by:

Hello everyone, I would like to open a child window from the parent, and add an onload event listener to the child window which will tell the parent when the document has loaded. As far as I...

Javascript

actionscript - mc.rollOver event listener to sendAndLoad

by: daJunkCollector | last post by:

I wrote the following script. I have a movieclip named countyA_mc. I want the user to mouse over this movie clip, and result in the sending of a variable to the middle tier. I can establish...

Flash / Actionscript

Anchor/Link "onload like" event listener or prototype?

by: Cristian Pinheiro | last post by:

Hello guys, I was playing with Image Thumbnail Viewer (ITV) and found one problem, see http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm for more details and how it works. Now the...

Javascript

adding event inside a object constructor

by: xend | last post by:

Hi. I want to add an event handler inside a function that will be used has an object constructor. The event handler to be added is an "method" of the object. if i do this: function...

Javascript

Adding event listener problem

by: bugboy | last post by:

i'm trying to avoid inline event handlers by creating a listener. What i'm trying is based on reading this: http://www.quirksmode.org/js/events_advanced.html I can't figure out what i'm doing...

Javascript

adding event listener (go to url)

by: anagiga | last post by:

I am developing a page in html. I have a div which is playing a flash video. After the flash video stops, I want to take the user to a different url in the same window. I tried this function but it...

Javascript

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware