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綁定事件

回答

相關問題