js实现交互

JavaScript 实现交互的方法

事件监听

通过 addEventListener 绑定用户操作（如点击、输入等）到特定元素。例如点击按钮触发功能：

document.getElementById('myButton').addEventListener('click', () => {
  alert('按钮被点击');
});

DOM 操作

动态修改页面内容或样式实现视觉反馈。例如根据输入改变文本：

document.getElementById('inputField').addEventListener('input', (e) => {
  document.getElementById('output').textContent = e.target.value;
});

异步请求（AJAX/Fetch）

与服务器交互获取或提交数据。使用 Fetch API 的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

表单处理

阻止默认提交行为并自定义验证逻辑：

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  console.log(Object.fromEntries(formData));
});

动画效果

通过 CSS 或 JavaScript 实现过渡动画。例如使用 classList 切换类：

document.getElementById('box').addEventListener('mouseover', () => {
  document.getElementById('box').classList.add('hover-effect');
});

本地存储交互

利用 localStorage 保存用户偏好或状态：

// 存储数据
localStorage.setItem('theme', 'dark');
// 读取数据
console.log(localStorage.getItem('theme'));

第三方 API 集成

嵌入地图、支付等外部服务。例如加载 Google 地图：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 34.0522, lng: -118.2437 },
    zoom: 8,
  });
}

响应式设计

通过监听窗口大小变化调整布局：

window.addEventListener('resize', () => {
  if (window.innerWidth < 768) {
    document.body.classList.add('mobile-view');
  }
});

注意事项

• 事件委托优化性能：对动态内容使用父元素监听
• 防抖/节流处理高频事件（如滚动、输入）
• 无障碍访问：确保交互可通过键盘操作
• 错误处理：对网络请求和用户输入添加异常捕获