js访问节点元素，然后进行事件监听的问题？-灵析社区

## 方案一： 最直观的写法是： Java C++ C# function updateProgress(progressElement) { // 弹出输入框，让用户输入新的进度值 var newValue = prompt( "Enter new progress value (0-100):", progressElement.value ); // 确保输入值在合法范围内（0-100） newValue = parseInt(newValue, 10); if (!isNaN(newValue) && newValue >= 0 && newValue  ## 方案二： 可以将点击事件委托到ul标签同一处理 Java C++ C# // 添加事件委托 document .getElementById("progressList") .addEventListener("click", function (event) { // 判断点击的元素是否是 progress 元素 if (event.target.tagName === "PROGRESS") { // 弹出输入框，让用户输入新的进度值 var newValue = prompt( "Enter new progress value (0-100):", event.target.value ); // 确保输入值在合法范围内（0-100） newValue = parseInt(newValue, 10); if (!isNaN(newValue) && newValue >= 0 && newValue 实现效果不变 ## 方案三： 可以通过数据驱动的方式，渲染列表，避免增加一项就要写一堆html // 数据数组 var data = [ { language: "Java", progress: 40 }, { language: "C++", progress: 40 }, { language: "C#", progress: 40 } ]; // 获取 ul 元素 var ulElement = document.getElementById("progressList"); // 遍历数据数组，创建并添加列表项和进度条 data.forEach(function (item) { var liElement = document.createElement("li"); var spanElement = document.createElement("span"); spanElement.textContent = item.language; var progressElement = document.createElement("progress"); progressElement.max = 100; progressElement.value = item.progress; // 添加点击事件监听器 progressElement.addEventListener("click", function (event) { var newValue = prompt( "Enter new progress value (0-100):", event.target.value ); newValue = parseInt(newValue, 10); if (!isNaN(newValue) && newValue >= 0 && newValue