Get Clicked <li> из <ul onclick>

Как относительный новичок с JS, я изо всех сил пытаюсь найти решение этого.

Мне нужно выяснить, какая строка неупорядоченного списка была нажата

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

Я действительно не хочу добавлять событие onclick для каждой отдельной строки, я уверен, что должен быть способ

Ответ 1

Вы можете использовать event.target для этого:

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>

Пример: http://jsfiddle.net/ArondeParon/2dEFg/5/

Обратите внимание, что это очень простой пример, и вы, вероятно, столкнетесь с некоторыми проблемами при делегировании событий элементам, содержащим более одного уровня. Когда это произойдет, вам нужно будет пройти дерево DOM вверх, чтобы найти содержащий элемент.

Ответ 2

Объект, который был нажат, -

event.target

внутри обратного вызова onclick. То, что вы пытаетесь сделать, это хорошая идея, и она известна как делегирование событий.

http://jsfiddle.net/VhfEh/

Ответ 3

Вы можете использовать event.target для этого:

Кажется, что не работает, поэтому я сделал небольшие изменения, похоже, сейчас работает.

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

Ответ 4

//Самый простой способ сделать это - добавить параметр запроса к вашим ссылкам:

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