JavaScript 事件模型：事件绑定、事件对象与事件委托

// 基础语法
元素.on[事件类型] = 回调函数;

// 示例：点击按钮触发逻辑
const btn = document.querySelector('#btn');
btn.onclick = function() {
  console.log('DOM0 事件触发');
};

btn.onclick = function() {
  console.log('第一次绑定'); // 不会执行
};
btn.onclick = function() {
  console.log('第二次绑定'); // 仅执行此函数
};

// 绑定事件
元素.addEventListener(事件类型, 回调函数, 捕获模式);
// 移除事件
元素.removeEventListener(事件类型, 回调函数, 捕获模式);

// 示例：绑定点击事件（冒泡阶段触发）
btn.addEventListener('click', handleClick, false);

// 定义具名函数（关键：确保引用一致）
function handleClick() {
  console.log('可移除的事件监听');
}

// 绑定事件
btn.addEventListener('click', handleClick, false);
// 移除事件（参数需完全匹配）
btn.removeEventListener('click', handleClick, false);

// DOM0 绑定
btn.onclick = function() {
  console.log('DOM0 执行');
};

// DOM2 绑定（两次）
btn.addEventListener('click', () => console.log('DOM2 - 1'), false);
btn.addEventListener('click', () => console.log('DOM2 - 2'), false);

// 点击输出顺序：DOM0 执行 → DOM2 - 1 → DOM2 - 2

btn.onclick = function(ev) {
  console.log(ev); // MouseEvent 对象（鼠标事件示例）
};

let eventRef = null;

// 目标元素绑定事件
btn.addEventListener('click', (ev) => {
  eventRef = ev;
});

// 父元素绑定事件（冒泡阶段）
document.body.addEventListener('click', (ev) => {
  console.log(ev === eventRef); // true（同一事件对象）
});

MouseEvent.prototype → UIEvent.prototype → Event.prototype → Object.prototype

btn.onclick = function(ev) {
  // 1. 坐标信息
  ev.clientX / ev.clientY; // 相对视口左上角坐标（不含滚动）
  ev.pageX / ev.pageY;     // 相对文档左上角坐标（含滚动）

  // 2. 事件基础信息
  ev.type;         // 事件类型（如 'click'）
  ev.target;       // 事件源（真实触发事件的元素，标准属性）
  ev.srcElement;   // 事件源（IE兼容属性）

  // 3. 事件控制方法
  ev.preventDefault();    // 阻止默认行为（如链接跳转、表单提交）
  ev.stopPropagation();   // 阻止事件冒泡（或捕获）
  ev.stopImmediatePropagation(); // 阻止后续同事件回调执行
};

window → document → html → body → 父元素 → 目标元素（捕获阶段）
                          ↓
目标元素（目标阶段）
                          ↓
父元素 → body → html → document → window（冒泡阶段）

<div class="outer">
  <div class="inner"></div>
</div>

const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');

// outer 捕获阶段绑定
outer.addEventListener('click', () => console.log('outer 捕获'), true);
// outer 冒泡阶段绑定
outer.addEventListener('click', () => console.log('outer 冒泡'), false);
// inner 目标阶段绑定（DOM0）
inner.onclick = () => console.log('inner 目标');

// 点击 inner 的输出顺序：
// outer 捕获（捕获阶段）→ inner 目标（目标阶段）→ outer 冒泡（冒泡阶段）

<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

const list = document.querySelector('#list');

// 父元素绑定事件，委托处理子元素逻辑
list.onclick = function(ev) {
  // 1. 兼容获取事件源
  const target = ev.target || ev.srcElement;
  // 2. 验证目标元素（仅处理 li 元素）
  if (target.nodeName.toLowerCase() === 'li') {
    // 3. 执行子元素逻辑
    target.style.backgroundColor = 'red';
  }
};

/**
 * 通用事件委托函数
 * @param {Element} parent - 委托的父元素
 * @param {string} type - 事件类型（如 'click'）
 * @param {string} selector - 目标子元素选择器（如 'li'、'.item'）
 * @param {Function} handler - 事件处理函数（this 指向目标子元素）
 */
function delegate(parent, type, selector, handler) {
  // 绑定父元素事件
  parent.addEventListener(type, function(ev) {
    const target = ev.target;
    // 验证目标元素是否匹配选择器（兼容处理）
    const matches = target.matches 
      ? target.matches(selector) 
      : target.msMatchesSelector(selector); // IE兼容
    
    if (matches) {
      // 调整 this 指向目标元素，传递事件对象
      handler.call(target, ev);
    }
  });
}

// 使用示例
delegate(list, 'click', 'li', function(ev) {
  this.style.backgroundColor = 'red'; // this 指向被点击的 li
});

const box = document.querySelector('#drag-box');

// 绑定鼠标按下事件（启动拖拽）
box.addEventListener('mousedown', handleDown);

function handleDown(ev) {
  // 禁止右键/中键拖拽
  if (ev.which === 2 || ev.which === 3) return;

  // 记录初始状态（元素位置、鼠标坐标）
  const startState = {
    clientX: ev.clientX,
    clientY: ev.clientY,
    offsetLeft: this.offsetLeft,
    offsetTop: this.offsetTop
  };

  // 绑定鼠标移动/抬起事件（委托到 document）
  const handleMove = function(ev) {
    // 计算新位置
    const newLeft = ev.clientX - startState.clientX + startState.offsetLeft;
    const newTop = ev.clientY - startState.clientY + startState.offsetTop;
    // 更新元素位置
    box.style.left = `${newLeft}px`;
    box.style.top = `${newTop}px`;
  };

  const handleUp = function() {
    // 解除事件绑定，结束拖拽
    document.removeEventListener('mousemove', handleMove);
    document.removeEventListener('mouseup', handleUp);
  };

  document.addEventListener('mousemove', handleMove);
  document.addEventListener('mouseup', handleUp);
}