button onclick bind event

Question

In HTML, I have a button list. If user clicks a button,
doCommand function will be called. The code is following,

<ul>
<li class="button1" onclick="doCommand('bold');" id="bold-button" title="bold">B</li>
<li class="button2" onclick="doCommand('bold');" id="italic-button" title="bold">I</li>
<li class="button3" onclick="doCommand('bold');" id="underline-button" title="bold">U</li>
<li class="button4" onclick="doCommand('bold');" id="strikethrough-button" title="bold">S</li>
</ul>

This is plain expression, normal web programmer will code like that. But, I want to hide onclick event and its function for security reason. So the HTML code will be like this,

<ul>
<li class="button1" id="bold-button" title="bold">B</li>
<li class="button2" id="italic-button" title="bold">I</li>
<li class="button3" id="underline-button" title="bold">U</li>
<li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>

Is there any efficient way to do this? Hiding onclick property but do the same work. I am using jQuery.

Answer 1

The class should be the same at all buttons, like this:

<li class="button button1"...
<li class="button button2"...

Then, you can do like this in javascript.

$("li.button").click(function() {
  doCommand('bold');
});

Answer 2

if you set the same class for the btns, you could easily do:

markup:

<ul>
<li class="button1 clickable" id="bold-button" title="bold">B</li>
<li class="button2 clickable" id="italic-button" title="bold">I</li>
<li class="button3 clickable" id="underline-button" title="bold">U</li>
<li class="button4 clickable" id="strikethrough-button" title="bold">S</li>
</ul>

js:

$('.clickable').click(function(){/* doCommand('bold') or whatever */})

Edit : if you want on click to directly transform the text to bold, you could use the this (that refers to the element you clicked, and you need to wrap it inside jQuery $) keyword inside the function ie

$('.clickable').click(function(){$(this).css('font-weight','bold')})

Answer 3

Without changing your markup and using vanilla JS you can do it the following way.

 const list = document.querySelector('ul'); list.addEventListener('click', e => { if (e.target.classList.contains('button1')) { console.log('bold'); }; if (e.target.classList.contains('button2')) { console.log('italics'); }; if (e.target.classList.contains('button3')) { console.log('underline'); }; if (e.target.classList.contains('button4')) { console.log('strikethrough'); }; }) 

 <ul> <li class="button1" id="bold-button" title="bold">B</li> <li class="button2" id="italic-button" title="bold">I</li> <li class="button3" id="underline-button" title="bold">U</li> <li class="button4" id="strikethrough-button" title="bold">S</li> </ul> 

I assign the event to the parent list, and check the class of the target allowing to do whatever action needed.

Answer 4

You can use jquery's document ready event to wire up the events:

---

$(function()
{
    $("#bold-button").click(function(){doCommand('bold');});
}
);