button onclick绑定事件

在HTML中，我有一个按钮列表。如果用户点击一个按钮，
doCommand函数将被调用。该代码是以下，button onclick绑定事件

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

来源

2011-02-08 Jinbom Heo

可能重复[Javascript类点击事件监听器]（http://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class） – Loktar 2016-05-02 19:39:07

如果将同一类的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 */})

编辑：如果你想在点击要直接将文本转换为粗体，可以使用这个（即指您单击的元素， d你需要用它的jQuery $内）关键字里面的函数，即

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

来源

2011-02-08 13:34:41 stecb

但是，我怎么知道哪个按钮被点击？ – 2011-02-08 13:38:24

里面的功能，“this”是指你点击的li'按钮'..如果你提醒this.id它会告诉你每个按钮的正确ID .. – stecb 2011-02-08 13:41:35

类应该是相同的，在所有的按钮，像这样：

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

然后，你可以做这样的JavaScript的。

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

来源

2011-02-08 13:34:49

您可以使用jQuery的文档准备事件要连接的事件：

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

来源

2011-02-08 13:35:17 Aliostad

不改变你的标记和使用香草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>

我为事件指定父列表，并检查类目标允许做任何需要的行动。

来源

2016-05-02 19:29:22 Loktar

button onclick绑定事件

回答

相关问题