кнопка onclick bind event

Question

В HTML, у меня есть список кнопок. Если пользователь нажмет кнопку, будет называться
doCommand. Код Ниже,

<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> 

Это обычное выражение, нормальный веб-программист будет такой код. Но, я хочу скрыть событие onclick и его функцию по соображениям безопасности. Так HTML код будет выглядеть следующим образом,

<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> 

Есть ли эффективный способ сделать это? Скрытие onclick собственность, но такая же работа. Я использую jQuery.

Answer 1

если вы установите один и тот же класс для кнопок BTN, вы можете легко сделать:

разметки:

<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> 

ЯШ:

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

Edit: если вы хотите по щелчку для прямого преобразования текста в жирный, вы можете использовать это (это относится к элементу, который вы нажали, d вам нужно обернуть его внутри JQuery $) ключевое слово внутри функции т.е.

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

Answer 2

Класс должен быть одинаковым на всех кнопок, например:

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

Затем вы можете сделать, как это в JavaScript.

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

Answer 3

Вы можете использовать документ, готовое событие Jquery для проволоки до события:

---

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

Answer 4

без изменения разметки и использования ванили JS вы можете сделать это следующим образом.

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>

поручает событие для родительского списка, и проверьте класс цели, позволяющую делать все необходимые действия.