如何使用addEventListener替代HTML中的onclick属性实现元素显示/隐藏切换

嗨，这事儿很简单！咱们把HTML里的内联onclick移除，改用JS的addEventListener来绑定事件，这样能做到HTML结构和JS行为分离，代码也更易维护。下面一步步来改：

第一步：清理HTML结构 #

先把按钮上的onClick属性删掉，让HTML只负责展示内容，不要掺杂行为逻辑：

<button id="Toggle">Toggle Movelist On/Off</button>
<div id="movelist">
  Movelist content
</div>

第二步：保留CSS样式 #

原来的CSS可以直接沿用，它负责控制元素的初始隐藏状态和背景样式：

#movelist {
  display: none;
  background-color: lime;
}

第三步：用addEventListener实现切换逻辑 #

现在把点击事件的逻辑完全放到JS里，通过addEventListener给按钮绑定点击事件，同时可以优化一下原来的函数写法：

// 先获取页面上的按钮和目标元素
const toggleButton = document.getElementById('Toggle');
const moveListElement = document.getElementById('movelist');

// 定义切换显示/隐藏的函数
function toggleMoveList() {
  // 判断当前显示状态，切换对应的display值
  if (moveListElement.style.display === 'block') {
    moveListElement.style.display = 'none';
  } else {
    moveListElement.style.display = 'block';
  }
}

// 给按钮绑定点击事件
toggleButton.addEventListener('click', toggleMoveList);

小技巧：简化代码 #

如果想让逻辑更简洁，还可以用三元表达式来缩短判断语句：

function toggleMoveList() {
  moveListElement.style.display = moveListElement.style.display === 'block' ? 'none' : 'block';
}

注意事项 #

要确保JS代码在DOM加载完成后再执行，避免出现找不到元素的情况。可以把代码放到DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
  const toggleButton = document.getElementById('Toggle');
  const moveListElement = document.getElementById('movelist');

  function toggleMoveList() {
    moveListElement.style.display = moveListElement.style.display === 'block' ? 'none' : 'block';
  }

  toggleButton.addEventListener('click', toggleMoveList);
});

备注：内容来源于stack exchange，提问作者AshesOfPhoenix