Adding event listener problem

160 100+

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 wrong.. here is an example which i want to turn a div's background colour to grey when clicked but it doesn't work :(

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head><title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

document.getElementById("box").addEventListener('click',doSomething,false);

function doSomething() {

    this.style.backgroundColor = '#555555';

}

</script>

</head>

<body>

 <div id="box" style="background-color:blue; height:200px; width:200px;">&nbsp;</div>

</body>

</html>]

Feb 10 '09 #1

Subscribe Post Reply

1476

bugboy

160

100+

maybe this i far too simplified.. i'll add another question to this one... if using inline event handlers is so out of date why can't i find a strong tutorial on the current state of the art way of doing this. The quirksmode article seems detailed but it never seems to put it all together in a way that i can see the application of it in practice.

Feb 10 '09 #2

Dormilich

8,658

Expert Mod 8TB

two things
a) Internet Explorer doesn't support addEventListener(), search for the addEvent() functions (workaround)
b) if the element doesn't exists yet (i.e. not yet loaded) the event can't be attached. you have to delay the event attaching until the page is fully loaded, or append the script element at the end of the content.

Feb 10 '09 #3

bugboy

160

100+

Thanks, Exactly what i needed!

Feb 11 '09 #4

Similar topics

Problem adding node in IE6 on page load

by: Joel Byrd | last post by:

I am having a problem adding a node to the page. This works on other browser (Opera, Firefox, etc.), but not in IE. The following is the function to add the node: (the id "test_div" is a...

Javascript

An Event Listener

by: Steve Teeples | last post by:

I have been perplexed by how to best treat an event that spans different classes. For example, I have a form which a user inputs data. I want to broadcast that data via an event to another...

C# / C Sharp

Publish/subscribe event manager using weakrefs

by: Kamilche | last post by:

''' event.py An event manager using publish/subscribe, and weakrefs. Any function can publish any event without registering it first, and any object can register interest in any event, even...

Python

IE Not Stopping Default Event

by: blaine | last post by:

Hello, I'm currently overriding function keys (F1 to F4) to perform other actions. In order to do this the default popup windows of Help (F1), Seach(F3) etc must be turned off. In FF it's easy...

Javascript

Adding custom events to widget

by: Anthony Levensalor | last post by:

Hey guys! I'm writing a widget wherein I want the pages using it to be able to subscribe to events on it. I did my own research, not asking anyone to write it for me, just want to make sure I'm...

Javascript

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

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

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing