33

My HTML:

<div id="x" onclick="clickHandler(event)">
   <div id="button1">This turns green</div>
   <div id="button2">This turns blue</div>
</div>

So first of all, why am I supposed to be passing "event" into the click handler and is event some kind of system keyword? Also, since the click handler is identified on the container div, how do I know which button has been clicked?

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
antonpug
  • 13,724
  • 28
  • 88
  • 129

3 Answers3

56

event is an Event object which is created automatically when an event is fired. Note that you don't have to call it event (I tend to call it simply e). That Event object has a number of properties which describe the event it represents. In this case, the one you're interested in would be target, which shows the element that was the source of the event:

function clickHandler(e) {
    var target = e.target;
}

Here's a working example.

Unfortunately, it's never quite that simple. While the specification says it should be event.target, Internet Explorer likes to be different, and chooses to use event.srcElement, so you probably want to put in a check to make sure event.target exists! For example:

function clickHandler(e) {
    var target = (e.target) ? e.target : e.srcElement;
}
James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • Ahh cool, so target gets me the name of the element that is being clicked on? What is this JFiddle thing btw, mad cool! – antonpug Oct 21 '11 at 07:34
  • Not the name, it gets you a reference to the actual element itself. And yeah, jsfiddle is a great tool for experimenting and testing quick bits of JS! – James Allardice Oct 21 '11 at 07:35
  • 2
    Got a bit confused here. So, yes, `event` is the name of the variable containing an Event object representing the event in an onclick handler. It's a sort of reserved variable name, like `this`. – commonpike May 01 '14 at 13:09
  • 1
    Kind of a late comment, but one thing I noticed is that if you use e.getAttribute("id") the results can vary. I have an image with an id wrapped in a div with an id, and the event handler is attached to the div using its class selector. When I click on the image the event.target is the image, and when I click on the div (outside of the image), then the event target is the div, which might be a problem sometimes. If I use this.getAttribute("id") I always get the id of the div, regardless of whether I clicked on the image or the div. – SScotti Jul 16 '19 at 03:03
11

I usually just name the clicked element in the argument list of the call to the click handler, something like (untested) this:

<div id="x">
   <div id="button1" onclick="handle_click_event( this, 'green' )">This turns green</div>
   <div id="button2" onclick="handle_click_event( this, 'blue' )">This turns blue</div>
</div>

function handle_click_event ( obj, new_color ) {
  obj.style.backgroundColor = new_color;
}

Could that approach work for you?

Pete Wilson
  • 8,610
  • 6
  • 39
  • 51
  • 1
    "self" usually refer to the current Window. Therefore, it will not work. Use "this" keyword instead of "self". – Nazmul Oct 21 '11 at 08:00
  • 1
    Since it said untested, I tested it via fiddle for you. No, it doesn't work... Here are the changes I had to make for it to work `function handle_click_event ( new_color ) { event.target.style.backgroundColor = new_color; }
    This turns green
    This turns blue
    `     – the chad May 28 '19 at 23:01
-15

Why can't you do this?

<div id="x">
   <div id="button1" onclick="clickHandler1()">This turns green</div>
   <div id="button2" onclick="clickHandler2()">This turns blue</div>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
yeeen
  • 4,911
  • 11
  • 52
  • 73