Thymeleaf onclick事件實現及其在網頁優化中的運用

對於網頁優化來說，我們一般都會選用Jquery等JS框架，對於SpringBoot等後端框架則常用Thymeleaf進行數據填充。在此基礎上，Thymeleaf也具備了一些簡單的JS交互處理能力。

一、實現onclick事件方法

Thymeleaf中實現onclick事件，需要使用th:attr標籤，將onclick事件作為一個單獨的屬性嵌入到相應的html標籤中。

<button th:attr="onclick='method()'">事件名稱</button>

上述代碼中的method()即為觸發事件後要執行的方法。同樣的，也可以使用變數作為方法名傳遞參數，如下：

<button th:attr="onclick=__${variable}__">事件名稱</button>

二、使用onclick事件實現頁面效果

通過onclick事件，我們可以對頁面進行一些操作，使得頁面效果更加豐富。比如點擊按鈕對下拉菜單進行切換，實現如下：

<div class="dropdown">
  <button class="btn dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" th:attr="onclick='toggleMenu()'>下拉菜單</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">鏈接1</a>
    <a class="dropdown-item" href="#">鏈接2</a>
    <a class="dropdown-item" href="#">鏈接3</a>
  </div>
</div>

上述代碼中，我們使用了Bootstrap框架中的dropdown組件，同時通過toggleMenu()方法控制了下拉菜單的顯示和隱藏。toggleMenu()方法聲明如下：

function toggleMenu() {
  var menu = document.querySelector('.dropdown-menu');
  if (menu.classList.contains('show')) {
    menu.classList.remove('show');
  } else {
    menu.classList.add('show');
  }
}

三、使用onclick事件提升網站性能

對於需要一些JS操作的頁面，我們一般都會將JS文件引入到頁面中，但情況並非總是如此。有些情況下，我們可以使用Thymeleaf中的onclick事件，將JS處理直接嵌入到HTML文件中，從而減少JS文件的載入時間，提升網站性能。如下所示：

<div class="card" th:each="item : ${items}">
  <div class="card-header" th:text="${item.title}">標題</div>
  <div class="card-body">
    <p th:text="${item.content}">內容</p>
    <button class="btn btn-primary" th:attr="onclick='addCart(\'' + ${item.id} + '\')'">添加到購物車</button>
  </div>
</div>

上述代碼中的addCart(id)即為將商品添加至購物車的操作。通過onclick實現，我們將購物車的JS操作直接嵌入了HTML文件中，既提升了網站性能，也降低了前端開發的複雜度。