Как получить аргументы addEventListener на <a href> - PullRequest
Новая
       14

Как получить аргументы addEventListener на <a href>

0 голосов
/ 13 апреля 2019

У меня есть PHP-скрипт, который генерирует ссылки - я хочу использовать addEventListener для получения аргументов в этих ссылках, но все, что я пытаюсь сделать, похоже, не работает.Это очень старый код, который раньше работал с событиями onClick, но я обновляю код и считаю, что addEventListener - верный путь.

Я вернул свой код к основам, чтобы протестировать лучшее кодовое решение.

Итак, у меня есть такие ссылки 

    <a href="#" id="1" data-un-str="miguel" class="nameClick" >Alert Name1</a>
    </br>
    <a href="#" id="2" data-un-str="sarah" class="nameClick" >Alert Name 2</a>
    </br>

, а также функция 

    function buildlink(e) 
    {
    var e = window.e || e;
    if (e.target.tagName !== 'A')
        return;
    alert(e.id);
    }

и обработчик событий, как это. 

window.onload=function(){
if (document.addEventListener)
    document.addEventListener('click', buildlink, false);

Событиеобработчик работает и улавливает щелчки по ссылкам.

Я просто не понимаю, как подобрать arg-данные в id, но больше всего мне хотелось бы знать, как выбиратьдо аргументов в data-un-str тоже.Например, «miguel» или «sarah»

Я предполагаю, что это возможно, поскольку я видел это в другом месте, я просто не мог понять, как это было сделано.Раньше я программировал JS более 10+ лет назад, но теперь я немного растерялся из-за DOM, и вещи, похоже, сильно изменились.

Для кода выше, когда он пытается предупредить идентификаторпо ссылке, которую я нажал, я просто получил «неопределенный» в моем предупреждении.

Любой совет был бы великолепен.Спасибо

1 Ответ

0 голосов
/ 13 апреля 2019

event.target (где event - первый параметр, переданный в обработчик) будет ссылаться на элемент, по которому щелкнули, и вы можете получить атрибут data-un-str, проверив свойство .dataset.unStr цели: 

function buildlink(event) {
  const { target } = event;
  if (target.tagName !== 'A') {
    return;
  }
  const { id, dataset } = target;
  const { unStr } = dataset;
  console.log(id, unStr);
}

window.onload = function() {
  if (document.addEventListener)
    document.addEventListener('click', buildlink, false);
}
<a href="#" id="1" data-un-str="miguel" class="nameClick">Alert Name1</a>
<br>
<a href="#" id="2" data-un-str="sarah" class="nameClick">Alert Name 2</a>
<br>
...