Как правильно динамически создавать обработчики событий в javascript для многих ссылок?

Question

Я генерирую несколько ссылок на странице. Я хочу добавить обработчики событий onmouseover, onmouseout и onclick к ссылкам после загрузки DOM, т. Е. Использовать jquery для циклического перемещения по ссылкам и прикрепления обработчиков. Однако проблема в том, что каждому обработчику требуется информация, относящаяся к этой ссылке.

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

<a href="" onmouseover="somefunc(1,100);"></a>

Таким образом, в приведенном выше примере 1 и 100 - это данные, считанные из базы данных и выведенные на страницу, и их необходимо передать функции. Итак, как мне вывести эту информацию для этой ссылки, если я собираюсь прикрепить обработчик событий во время загрузки. Это правильно ...?

<a href="" data="1,100">

Другими словами, я создаю свой собственный атрибут и позже получаю эту информацию при подключении обработчика событий? Это стандартный способ сделать это или есть лучший способ?

Answer 1

Поскольку вы упоминаете jQuery в своем вопросе (но не помечены), я собираюсь предположить, что это допустимая опция.

Если вы используете jQuery> 1.4.3, jQuery автоматически проанализирует атрибуты data-*.

<a href="" data-number1="1" data-number2="100">

И в вашем обработчике кликов jQuery:

$("a").click(function(){
  var num1 =  $(this).data("number1");
  var num2 =  $(this).data("number2");
});

Вы также можете сохранить объект json в вашем data-*.

<a href="" data-numbers="{'num1: 1, 'num2': 2}">

$("a").click(function(){
  var numbers =  $(this).data("numbers");
  //numbers.num1 and numbers.num2
});

Answer 2

Я бы сказал, что если вы пишете новую разметку, самый простой способ будет использовать HTML5 data- * атрибуты :

<a href="" data-minVal="1" data-maxVal="100">Link Text</a>

И тогда вы можете использовать этов jQuery с помощью метода data() (не будет работать с более ранними версиями jQuery):

function someFunc(element, min, max){
    // Do something
}


$(function(){
    $('a').click(function(){
        var $this = $(this); // only create one jQuery object with this
        someFunc(this, $this.data('minVal'), $this.data('maxVal'));
    });
});