bouton onclick bind event

Question

En HTML, j'ai une liste de boutons. Si l'utilisateur clique sur un bouton, la fonction
doCommand sera appelée. Le code suit,

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

C'est l'expression simple, programmeur web normal coderez comme ça. Mais, je veux cacher l'événement onclick et sa fonction pour des raisons de sécurité. Ainsi, le code HTML sera comme ça,

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

est-il un moyen efficace de le faire? Masquez la propriété onclick mais faites le même travail. J'utilise jQuery.

Answer 1

si vous définissez la même classe pour les btns, vous pouvez facilement faire:

balisage:

<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 */}) 

Modifier: si vous voulez le clic pour transformer directement le texte en gras, vous pouvez utiliser le ce (qui se réfère à l'élément sur lequel vous avez cliqué, un d vous devez envelopper l'intérieur mot-clé dans la fonction c.-à-

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

Answer 2

La classe doit être le même à tous les boutons, comme ce jQuery $):

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

Ensuite, vous pouvez le faire comme ça dans javascript.

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

Answer 3

Vous pouvez utiliser le document de jquery événement prêt à câbler les événements:

---

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

Answer 4

Sans changer votre balisage et à l'aide JS vanille vous pouvez le faire de la façon suivante.

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>

J'assignez l'événement à la liste des parents, et vérifier la classe de la cible permettant de faire toutes les mesures nécessaires.