title: button onclick bind event
body: <p>In HTML, I have a button list. If user clicks a button,<br>
  <code>doCommand</code> function will be called. 
  The code is following,</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="button1" onclick="doCommand('bold');" id="bold-button" title="bold"&gt;B&lt;/li&gt;
  &lt;li class="button2" onclick="doCommand('bold');" id="italic-button" title="bold"&gt;I&lt;/li&gt;
  &lt;li class="button3" onclick="doCommand('bold');" id="underline-button" title="bold"&gt;U&lt;/li&gt;
  &lt;li class="button4" onclick="doCommand('bold');" id="strikethrough-button" title="bold"&gt;S&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is plain expression, normal web programmer will code like that. 
  But, I want to hide <code>onclick</code> event and its function for security reason.
  So the HTML code will be like this,</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="button1" id="bold-button" title="bold"&gt;B&lt;/li&gt;
  &lt;li class="button2" id="italic-button" title="bold"&gt;I&lt;/li&gt;
  &lt;li class="button3" id="underline-button" title="bold"&gt;U&lt;/li&gt;
  &lt;li class="button4" id="strikethrough-button" title="bold"&gt;S&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is there any efficient way to do this?
  Hiding <code>onclick</code> property but do the same work.
  I am using jQuery.</p>