我如何创建一个钩子来响应一个事件来加载更多的数据？

<button id="loadMoreButton">加载更多</button>
<div id="dataContainer"></div>

// 定义事件处理函数
function loadMoreData() {
  // 发送AJAX请求或其他方式加载更多的数据
  // 这里只是一个示例，假设通过AJAX请求获取数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 数据加载成功后的处理逻辑
      var newData = JSON.parse(xhr.responseText);
      // 将新数据添加到页面中
      var dataContainer = document.getElementById("dataContainer");
      newData.forEach(function(item) {
        var newItem = document.createElement("div");
        newItem.textContent = item;
        dataContainer.appendChild(newItem);
      });
    }
  };
  xhr.open("GET", "https://example.com/load-more-data", true);
  xhr.send();
}

// 绑定事件处理函数到按钮上
var loadMoreButton = document.getElementById("loadMoreButton");
loadMoreButton.addEventListener("click", loadMoreData);