使用JavaScript操作DOM节点事件的具体方案

<!-- 行内绑定点击事件 -->
<button onclick="alert('点击了按钮')">按钮1</button>

<!-- 也可以调用外部函数 -->
<button onclick="handleClick()">按钮2</button>

<script>
  function handleClick() {
    console.log('按钮2被点击');
  }
</script>

<button id="btn3">按钮3</button>

<script>
  const btn3 = document.getElementById('btn3');
  // 绑定点击事件
  btn3.onclick = function() {
    console.log('第一次绑定的点击事件');
  };
  // 后绑定的会覆盖前一个
  btn3.onclick = function() {
    console.log('第二次绑定的点击事件（覆盖了之前的）');
  };
</script>

<button id="btn4">按钮4</button>

<script>
  const btn4 = document.getElementById('btn4');
  // 绑定第一个点击事件
  btn4.addEventListener('click', function() {
    console.log('点击事件1');
  });
  // 绑定第二个点击事件（不会覆盖，会依次执行）
  btn4.addEventListener('click', function() {
    console.log('点击事件2');
  });

  // 也可以绑定其他事件（如鼠标移入、移出）
  btn4.addEventListener('mouseenter', function() {
    btn4.style.backgroundColor = 'pink';
  });
  btn4.addEventListener('mouseleave', function() {
    btn4.style.backgroundColor = '';
  });
</script>

const btn3 = document.getElementById('btn3');
btn3.onclick = null; // 解绑点击事件

<button id="btn5">按钮5</button>

<script>
  const btn5 = document.getElementById('btn5');
  // 先定义具名函数（不能用匿名函数）
  function handleBtn5Click() {
    console.log('按钮5被点击');
  }
  // 绑定事件
  btn5.addEventListener('click', handleBtn5Click);
  // 解绑事件（用同一个函数）
  btn5.removeEventListener('click', handleBtn5Click);
</script>

<button id="btn6">按钮6</button>
<div id="box" style="width: 200px; height: 200px; background: #eee;"></div>

<script>
  // 1. 点击按钮：获取事件信息
  const btn6 = document.getElementById('btn6');
  btn6.addEventListener('click', function(e) {
    console.log('触发事件的元素：', e.target); // 触发事件的DOM节点（按钮本身）
    console.log('点击的坐标（相对于页面）：', e.pageX, e.pageY);
    console.log('是否按了Ctrl键：', e.ctrlKey);
  });

  // 2. 常用：阻止默认行为（比如阻止a标签跳转、表单提交）
  const a = document.createElement('a');
  a.href = 'https://baidu.com';
  a.textContent = '百度链接（点了不跳转）';
  document.body.appendChild(a);
  a.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认行为（跳转）
    console.log('点击了链接，但没跳转');
  });

  // 3. 常用：阻止事件冒泡（避免父元素触发相同事件）
  const box = document.getElementById('box');
  box.addEventListener('click', function() {
    console.log('点击了div');
  });
  btn6.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到div
    console.log('点击了按钮，不会触发div的点击事件');
  });
</script>

<p id="text">Hello DOM</p>
<button id="toggleBtn">切换样式</button>

<script>
  const text = document.getElementById('text');
  const toggleBtn = document.getElementById('toggleBtn');
  
  toggleBtn.addEventListener('click', function() {
    text.classList.toggle('active'); // 切换active类
  });
</script>
<style>
  .active {
    color: red;
    font-size: 20px;
    font-weight: bold;
  }
</style>

<input type="text" id="input" placeholder="输入内容...">
<p id="preview"></p>

<script>
  const input = document.getElementById('input');
  const preview = document.getElementById('preview');
  
  // 监听输入事件（input）
  input.addEventListener('input', function(e) {
    preview.textContent = `你输入了：${e.target.value}`;
  });
</script>