Javascript 按钮点击绑定事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4933648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
button onclick bind event
提问by Jinbom Heo
In HTML, I have a button list. If user clicks a button,doCommandfunction will be called.
The code is following,
在 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>
This is plain expression, normal web programmer will code like that.
But, I want to hide onclickevent and its function for security reason.
So the HTML code will be like this,
这是简单的表达方式，普通的 Web 程序员会这样编写代码。但是，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>
Is there any efficient way to do this?
Hiding onclickproperty but do the same work.
I am using jQuery.
有什么有效的方法可以做到这一点吗？隐藏onclick财产但做同样的工作。我正在使用 jQuery。
回答by Jan Sverre
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.
然后，您可以在 javascript 中执行此操作。
$("li.button").click(function() {
doCommand('bold');
});
回答by stecb
if you set the same class for the btns, you could easily do:
如果为 btns 设置相同的类，则可以轻松执行以下操作：
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:
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 i.e.
编辑：如果你想点击直接将文本转换为粗体，你可以在函数中使用this（指的是你点击的元素，你需要将它包裹在 jQuery $ 中）关键字
$('.clickable').click(function(){$(this).css('font-weight','bold')})
回答by Aliostad
You can use jquery's document ready event to wire up the events:
您可以使用 jquery 的文档就绪事件来连接事件：
$(function()
{
$("#bold-button").click(function(){doCommand('bold');});
}
);
回答by Loktar
Without changing your markup and using vanilla JS you can do it the following way.
无需更改标记并使用 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>I assign the event to the parent list, and check the class of the target allowing to do whatever action needed.
我将事件分配给父列表，并检查允许执行任何需要的操作的目标的类。
