Есть ли лучший способ вызова JavaScript с параметрами из тега привязки?

Question

Я прочитал следующий вопрос

Javascript и якорные теги, лучшие практики?

И, кажется, предлагает решение, такое как следующее

<a id="foo" href="#">Click Me</a>

document.getElementByID("foo").onclick = function() { alert("hi"); }

Однако предположим, что у меня есть несколько ссылок, вызывающих одну и ту же функцию с другим параметром. Моим быстрым и грязным решением было бы создать что-то вроде следующего

<a href="#" onClick="myFunction('1001');return false">Click Me 1</a>
<a href="#" onClick="myFunction('1002');return false">Click Me 2</a>
<a href="#" onClick="myFunction('1003');return false">Click Me 3</a>

Есть ли способ адаптировать решение слушателя для работы с параметрами?

Answer 1

Вы можете использовать атрибут данных вдоль этих строк для каждого рассматриваемого элемента:

<a href="#" id="foo" data-id="1000">Click Me 1</a>​

И используйте следующий обратный вызов:

document.getElementById("foo").onclick = function() { 
    alert(this.getAttribute('data-id'));
}​

В форме скрипки здесь .

Однако лучшим вариантом может быть использование jQuery для обработки вещей. Предполагая формат ссылки выше, это будет выглядеть так:

$('#foo').click(function(){
  alert($(this).attr('data-id'));
});

Answer 2

Вы можете использовать делегирование.

<div id='links'>
<a href="#" class="link" data-param1='1000' data-param2='something'>click</a>
<a href="#" class="link" data-param1='1001' data-param2='something'>click</a>
<a href="#" class="link" data-param1='1002' data-param2='something'>click</a>
</div>
<script type='text/javascript'>
$links = document.getElementById("links");

$links.onclick=function(e){
  element = e.target;
  if(element.tagName="a" && element.getAttribute("class")=="link"){
    console.log(element.getAttribute("data-param1"))
    console.log(element.getAttribute("data-param2"));
  }
  return false;
}
</script>

Answer 3

Обратите внимание, что когда у вас есть в HTML такой код:

<a href="#" id="foo" onClick="myFunction('1001');return false">Click Me 1</a>

Точно так же, как в JS:

document.getElementById("foo").onclick = function(event) {
    myFunction('1001');
    return false;
}

Когда анализатор обнаружил атрибут события,он точно так же создает анонимную функцию.