title: Should I use custom data elements as parameter holders for event handling in JQuery?
body: <p>In a project, I was invoking events from in-line codes. 
  <strong>Old usage;</strong></p>
  
  <pre><code>&lt;button id='button' onclick='do_stuff("&lt;?= $id ?&gt;", "&lt;?= $name ?&gt;")'&gt;Do&lt;/button&gt;
  </code></pre>
  
  <p>But now, I want to use event listeners. <strong>New usage;</strong></p>
  
  <pre><code>$('#button').click({id:'&lt;?= $id ?&gt;', name:'&lt;?= $name ?&gt;'}, item_event_handler);
  
  function item_event_handler(event)
  {
    var id = event.data.id;
    var name = event.data.name;
  
    do_stuff(id, name);
  }
  
  function do_stuff(id, name)
  {
  }
  </code></pre>
  
  <p>This one works. But here is the problem; let's say I'm listing some items like below and I want to add event listeners on those items. <strong>Current usage;</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;? foreach($items as $item): ?&gt;
    &lt;li class='item' onclick='do_stuff("&lt;?= $item-&gt;id ?&gt;", "&lt;?= $item-&gt;name ?&gt;")'&gt;
      &lt;?= $item-&gt;title ?&gt;
    &lt;/li&gt;
    &lt;? endforeach ?&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Since <em>I don't want to create those items with JavaScript</em>, I can't add event listeners to them with individual parameters. Should I use data attributes to fetch parameters? <strong>Like;</strong></p>
  
  <pre><code>$('.item').click(item_event_handler);
  
  function item_event_handler(event)
  {
    var id = $(this).data('id');
    var name = $(this).data('name');
  
    do_stuff(id, name);
  }
  
  &lt;ul&gt;
    &lt;? foreach($items as $item): ?&gt;
    &lt;li class='item' data-id='&lt;?= $item-&gt;id ?&gt;' data-name='&lt;?= $item-&gt;name ?&gt;'&gt;
      &lt;?= $item-&gt;title ?&gt;
    &lt;/li&gt;
    &lt;? endforeach ?&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is this approach alright to use or there is any other way that makes more sense? Using data attributes in this manner could point to future problems? I don't want to waste time or make it complicated.</p>