按钮onclick绑定事件

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

所有按钮上的类都应该相同，如下所示：

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

然后，你可以在javascript中这样做。

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

Answer 2

如果你为btns设置了相同的类，你可以很容易地做到：

标记：

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

编辑 ：如果你想点击直接将文本转换为粗体，你可以在函数内使用this （指的是你点击的元素，你需要将它包装在jQuery $中）关键字

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

Answer 3

在不更改标记和使用vanilla 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> 

我将事件分配给父列表，并检查目标的类，允许执行所需的任何操作。

Answer 4

您可以使用jquery的文档就绪事件来连接事件：

---

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