当前位置：首页 > JavaScript

js交互功能实现

2026-03-15 14:46:29JavaScript

事件监听与处理

使用addEventListener绑定事件，例如点击、鼠标移动或键盘输入。通过回调函数执行交互逻辑，避免内联事件属性（如onclick）。

document.getElementById('button').addEventListener('click', function() {
  console.log('按钮被点击');
});

DOM 操作

通过document.querySelector或getElementById获取元素，动态修改内容、样式或属性。

const element = document.querySelector('.target');
element.textContent = '内容已更新';
element.style.color = 'red';

动态内容加载

使用fetch或XMLHttpRequest从服务器获取数据，更新页面内容。

js交互功能实现

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('content').innerHTML = data.message;
  });

动画效果

结合CSS过渡或JavaScript库（如GSAP）实现平滑动画。

const box = document.getElementById('box');
box.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(100px)' }
], { duration: 1000 });

表单交互

验证表单输入并处理提交事件，阻止默认行为以自定义逻辑。

js交互功能实现

document.getElementById('form').addEventListener('submit', function(event) {
  event.preventDefault();
  const inputValue = document.getElementById('input').value;
  if (inputValue.trim() !== '') {
    alert(`提交的值: ${inputValue}`);
  }
});

响应式设计

监听窗口大小变化，动态调整布局或功能。

window.addEventListener('resize', function() {
  if (window.innerWidth < 768) {
    console.log('移动端视图');
  }
});

状态管理

对于复杂交互，使用变量或对象跟踪状态，确保UI同步更新。

let isOpen = false;
document.getElementById('toggle').addEventListener('click', function() {
  isOpen = !isOpen;
  document.getElementById('menu').style.display = isOpen ? 'block' : 'none';
});