Получение Id элемента

[slavaspirit]

Добрый день!

Есть некий набор элементов. Каждый из них имеет уникальный Id вида id="el_34523". Элементы могут добавляться, могут удаляться...

Как написать так, чтобы getElementById сам понимал эти элементы по клику на них?

Т.е. нужно что-то типа:

var item = document.getElementById('el_+номер');

[Safort]

Вешаешь обработчик событий на их родителя и в коллбэке проверяешь свойство target у первого аргумента.

parentEl.addEventListener('click', function(e) {
  console.log(e.target.id); //выведет id элемента, на который кликнули
}, false);

[laimas]

Если удаляться/добавляться, то делегировать обработку события ближайшему родителю коллекции этих элементов:

function getId(e) {
    if(e.tagName=="SPAN") alert(e.id)
}

<div id="as" onclick="getId(event.target || event.srcElement)">
    <span id="as_1">AS1</span>
    <span id="as_2">AS2</span>
    <span id="as_3">AS3</span>
</div>

[slavaspirit]

laimas,
добавил, как понял, но не работает... У меня надо брать className видимо?

function getId(e) {
    if(e.className=="item") alert(e.id)
}

<div class="itemsList" id="el" onclick="getId(event.target || event.srcElement)">

        <div class="header">
          <div class="name"><p>Name<img src="media/main/arrowDownIco.png" alt=""></p></div>
          <div class="type"><p>Type</p></div>
          <div class="date"><p>Creation / Change Date</p></div>
        </div>

        <div class="item" id="el_01">
          <div class="itemType" id="itemType"><img src="media/main/folderIco.png" alt=""></div>
          <div class="name"><a href="">Материалы для работы</a></div>
          <div class="type">Folder</div>
          <div class="date">Создано 10.12.2014</div>
        </div>

        <div class="item" id="el_02">
          <div class="itemType" id="itemType"><img src="media/main/folderIco.png" alt=""></div>
          <div class="name"><a href="">Материалы для работы</a></div>
          <div class="type">Folder</div>
          <div class="date">Создано 10.12.2014</div>
        </div>

        <div class="item" id="el_03">
          <div class="itemType" id="itemType"><img src="media/main/folderIco.png" alt=""></div>
          <div class="name"><a href="">Материалы для работы</a></div>
          <div class="type">Folder</div>
          <div class="date">Создано 10.12.2014</div>
        </div>

        <div class="item" id="el_04">
          <div class="itemType" id="itemType"><img src="media/main/folderIco.png" alt=""></div>
          <div class="name"><a href="">Материалы для работы</a></div>
          <div class="type">Folder</div>
          <div class="date">Создано 10.12.2014</div>
        </div>

      </div>

[laimas]

Пожалуйста, можете проверять и имя класса. Только у вас элементов полно, и не получится, нужно проверять по иерархии в таком случае, то есть перебирать все элементы "вверх" пока не достигнем искомого.

Вот так в вашем случае:

function getId(e) {
    while(e.id != 'el') {
        if(e.className == 'item') {
           alert(e.id);
           break;
        }
        e = e.parentNode;
    }
}

[slavaspirit]

laimas,
спасибо большое, но ощущение, что break где-то не там или что-то еще... После нажатия на элемент страница зависает...

[laimas]

Все на месте - его задача после нахождения искомого элемента, id которого надо получить, закончить цикл.

[slavaspirit]

Заработало) Спасибо огромное)

[slavaspirit]

laimas,
еще один вопросик, если позволите. Задачка запихнуть по клику вышеозначенный объект в массив, либо убрать его оттуда, если он есть... Вроде, пишу логично, но не работает.
Только добавляет в массив, но убирать не хочет. Более того - если нажать на уже добавленный объект, тот добавится еще раз...:/

var itemsList = [];

        function getId(e) {
          while(e.id != 'el') {
            if(e.className == 'item') {
              if(e in itemsList) {
                itemsList.splice(e);
                alert("убрали");
              } else {
                itemsList.push(e);
                alert("добавили");
              }
              break;
            }
          e = e.parentNode;
          }
        }

[slavaspirit]

Решил вопрос вот так (надеюсь, не криво ):

var itemsList = [];

        function arrayCheck(value, array) 
        {
            for(var i = 0; i < array.length; i++) 
            {
                if(array[i] == value) return true;
            }
            return false;
        }

        function getId(e) {
          while(e.id != 'el') {
            if(e.className == 'item') {
              if(arrayCheck(e, itemsList)) {
                itemsList.splice(e, 1);
                alert("убрали");
              } else {
                itemsList.push(e);
                alert("добавили");
              }
              break;
            }
          e = e.parentNode;
          }
        }