Mixing CSS & Javascript Eventhandlers

Question

I'd like to be able to assign the same event handler to a number of different div elements. Each element will have a unique style.

I registered the eventhandler like so:

<script type="text/javascript">

function add_something() {
    document.getElementById('manipulate').onclick = do_something; 
}

function do_something(e) { 
this.style.property = value;
}

window.onLoad = add_something;
</script>

So I can assign an event handler to an element like so:

<div id="manipulate"></div>

The problem is that I want to assign that handler to several elements, each with a unique style, and I want to use CSS to do it. but i'm not sure how to do that.

Eventually, I want something that looks like this:

 <style>
 #element1{...}
 #element1{...}
 #element1{...}
 </style>

.....

<div id="element1" class="manipulate"></div>
<div id="element2" class="manipulate"></div>
<div id="element3" class="manipulate"></div>

Is this possible? Thanks

window.onLoad fires BEFORE your HTML is rendered, which is why we use "$(document).ready(...)" which means the HTML has been rendered. CSS doesn't handle events, JavaScript does. Stefan's example show you how. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Aug 12, 2011 at 0:22
@Diodeus No, DOM ready by definition fires before window load... — Šime Vidas
– Šime Vidas, Commented Aug 12, 2011 at 0:26
Btw, window.onLoad doesn't work - you have to use lowercase: window.onload. — Šime Vidas
– Šime Vidas, Commented Aug 12, 2011 at 0:27

Šime Vidas · Accepted Answer · 2011-08-12 00:21:52Z

1

Event delegation?

HTML:

<div id="wrap">
    <div id="element1" class="manipulate">First element</div>
    <div id="element2" class="manipulate">Second element</div>
    <div id="element3" class="manipulate">Third element</div>
</div>

JavaScript:

var wrap = document.getElementById('wrap');

wrap.onclick = function (e) {
    var elem = e.target;

    elem.style.color = 'red';
};

Live demo: http://jsfiddle.net/VLcPw/

answered Aug 12, 2011 at 0:21

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SharpBarb Over a year ago

Thanks, this seems like what I was looking for., but... Eventuallly I'm going to have several other elements inside "wrap", elements with different functions/events and some with no events at all. How could I exclude those elements without having to add a "if" check for each element?

Stefan Kendall · Accepted Answer · 2011-08-12 00:19:37Z

0

You can select elements by class in modern browsers, or just use jQuery and know it works everywhere.

$(document).ready(function(){
   $('.manipulate').click(function(){alert('Hello.')});
   //or .hover/any other event.
});

jQuery events.

Perhaps a more relevant example?

$('.manipulate').click(function(){
   $(this).addClass( 'whateverClass' );
   //or
   $(this).css('color', 'red');
});

answered Aug 12, 2011 at 0:19

Stefan Kendall

68.2k69 gold badges259 silver badges409 bronze badges

2 Comments

GBa Over a year ago

-1, not everyone wants to use jquery, the question just wants javascript. There's no need for a heavy library for this simple functionality.

Stefan Kendall Over a year ago

@Greg: Yup. I'm sure the top 500 websites clearly don't know what they're doing.

Carsten Bracke · Accepted Answer · 2011-08-12 00:22:59Z

0

Why are you not giving jquery a try?

With jquery you should just need this to bind the same click event to all corresponding elements:



    $("div.manipulate").click(function(e) {
        $(this).css(property, value);
    });

property has to replaced with a valid css property, value with a correct value, of course.

answered Aug 12, 2011 at 0:22

Carsten Bracke

1

2 Comments

SharpBarb Over a year ago

I was trying to go give Javascript a try first. I am still learning (as a hobby) and thought I should start with the basics. Isn't jQuery just a javascript collection?

Carsten Bracke Over a year ago

jQuery is an awesome framework which can save you lots of time, I think it's definitely worth a try. But of course you are right, you should start with basic javascript first.

Collectives™ on Stack Overflow

Mixing CSS & Javascript Eventhandlers

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related