title: Get passed element properties and attributes without many jQuery requests
body: <p>I have some list with list elements, which each of them have many custom attributes, like <code>data-user-id</code>, <code>data-avatar</code> and so on. On each list element I am attaching a jQuery click event like this</p>
  
  <pre><code>$('*.friendListItem').on('click', function () {
      var userId = this.something;
      var avatar = this.foo;
  }
  </code></pre>
  
  <p>Now since I have the passed element with all of its properties and attributes I need in the <code>this</code> object, I am looking for the most optimal way to access them, since doing it with <code>$(this).attr('data-user-id);</code> would result in unneccessary DOM traversions.</p>
  
  <p>The only way I can think of now using pure Javascript is like this</p>
  
  <pre><code>this.attributes['data-user-id'].nodeValue
  </code></pre>
  
  <p>which doesn't seem good and optimal.</p>
  
  <p>Is there a better way to do what I want?</p>