Get Clicked <li> from <ul onclick>

Question

As a relative beginner with JS, I am struggling to try and find a solution to this.

I need to find out which line of an unordered list was clicked

<ul onclick="alert(this.clicked.line.id);">
  <li id=l1>Line 1</li>
  <li id=l2>Line 2</li>
  <li id=l3>Line 3</li>
</ul>

I don't really want to add a onclick event to each individual line, I'm sure there must be a way ??

Slack

Have you tried setting a breakpoint on the onclick event, and examining the this.clicked object? – Fanatic

Answer 1

You can use event.target for this:

JS:

// IE does not know about the target attribute. It looks for srcElement
// This function will get the event target in a browser-compatible way
function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('test');
ul.onclick = function(event) {
    var target = getEventTarget(event);
    alert(target.innerHTML);
};

HTML:

<ul id="test">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Example: http://jsfiddle.net/ArondeParon/2dEFg/5/

Please note that this is a very basic example and you will likely encounter some problems when you delegate events to elements containing more than one level. When this happens, you will have to traverse the DOM tree upwards to find the containing element.

Izzo

+1 The key here is taking the Javascript out of the HTML attribute. – Costumier

This is correct as long as there are no other elemens in the li's. When you have <li><strong>Item 1</strong></li> than event.target will be the strong element (in that case you have to check the parents). – Kamilahkamillah

is it also possible to add all mouse events to an element and then determine in the handler function what event it was ?? – Slack

@Slack nope, you will have to bind each event manually (and this makes your code a lot more understandable as well) – Izzo

Hmm, doesn't seem to work in IE, I get the error: Error: 'target' is null or not an object – Slack

@cranckshaft IE uses event.srcElement. I will edit the answer accordingly. – Izzo

hi can you explain the js used above i mean what we are doing in this js technically ul.Onclick =function....i am new in js and i know basic js – I

Answer 2

The object which was actually clicked is

event.target

inside the onclick callback. What you are trying to do is a good idea, and it is known as event delegation.

http://jsfiddle.net/VhfEh/

Nicolenicolea

Easy solution that works if you don't care about IE8. – Sudderth

Answer 3

You can use event.target for this:

Did not seem to be working so I made small change seems to be working now.

var ul = document.getElementById('test');
ul.onclick = function(event) {
    var target = event.target;
    alert(event.target.innerHTML);
};  

Misbehavior

Answer 4

//The simplest way to do this might be to append a query parameter to your links:

<ul>
 <li><a href="Line 1">Line 1</a></li>
 <li><a href="Line 2">Line 2</a></li>
 <li><a href="Line 3">Line 3</a></li>
</ul>

Naker

Answer 5

If you want exact value of element then following code can work.Use innerText except innerHTML JS:

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('test');
    ul.onclick = function(event) {
var target = getEventTarget(event);
    alert(target.innerText);
};

HTML:

<ul id="test">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Buehrer

The answer is 'window.event.target'. Thank you good sir. – Poucher