【每日一面】事件模型与事件委托

// 捕获阶段监听
element.addEventListener('click', handler, true);

// 冒泡阶段监听（默认）
element.addEventListener('click', handler, false);
// 等价于
element.addEventListener('click', handler);

const items = document.querySelectorAll('.list-item');
items.forEach(item => {
  item.addEventListener('click', () => {
    console.log('点击了', item.textContent);
  });
});
// 问题：N 个监听器占用内存；动态新增的 item 不会被绑定

const list = document.querySelector('.list');
list.addEventListener('click', (event) => {
  const target = event.target.closest('.list-item');
  if (!target) return; // 点击的不是 list-item，忽略
  console.log('点击了', target.textContent);
});
// 一个监听器搞定所有，动态插入的 item 自动生效

const form = document.querySelector('#form');
form.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-action]');
  if (!btn) return;
  const action = btn.dataset.action;
  switch (action) {
    case 'save':   save();   break;
    case 'delete': delete(); break;
    case 'edit':   edit();   break;
  }
});

// stopPropagation —— 阻止后续传播，但当前元素上其他监听器仍会执行
element.addEventListener('click', function (e) {
  e.stopPropagation();
  console.log('handler 1'); // 会执行
});
element.addEventListener('click', function () {
  console.log('handler 2'); // 也会执行，stopPropagation 不阻止同级监听器
});

// stopImmediatePropagation —— 阻止传播 + 阻止当前元素上未执行的监听器
element.addEventListener('click', function (e) {
  e.stopImmediatePropagation();
  console.log('handler A'); // 会执行
});
element.addEventListener('click', function () {
  console.log('handler B'); // 不会执行！被上方的 stopImmediatePropagation 阻止了
});

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

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

outer.addEventListener('click', () => console.log('outer 捕获'), true);
outer.addEventListener('click', () => console.log('outer 冒泡'));

inner.addEventListener('click', () => console.log('inner 捕获'), true);
inner.addEventListener('click', () => console.log('inner 冒泡'));

outer 捕获
inner 捕获
inner 冒泡
outer 冒泡

const parent = document.querySelector('.parent');
parent.addEventListener('click', (e) => {
  const item = e.target.closest('.item');
  if (!item) return;
  // 处理点击
});

/**
 * 创建一个事件委托监听器
 * @param {HTMLElement} parent - 父容器
 * @param {string} eventType - 事件类型
 * @param {string} selector - CSS 选择器，用于过滤子元素
 * @param {Function} handler - 事件处理函数，接收 (event, matchedElement)
 * @param {boolean|Object} options - 传给 addEventListener 的选项
 */
function delegate(parent, eventType, selector, handler, options = false) {
  parent.addEventListener(eventType, (event) => {
    const target = event.target.closest(selector);
    // 确保目标元素在父容器内（closest 可能匹配到父容器之外）
    if (target && parent.contains(target)) {
      handler.call(target, event, target);
    }
  }, options);
}

// 使用示例
delegate(document.getElementById('list'), 'click', '.item', (e, el) => {
  console.log('点击了', el.textContent);
});

delegate(document.getElementById('toolbar'), 'click', '[data-action="delete"]', () => {
  console.log('执行删除操作');
});

function delegateMap(parent, eventType, mapping, options = false) {
  parent.addEventListener(eventType, (event) => {
    const target = event.target;
    for (const [selector, handler] of Object.entries(mapping)) {
      const matched = target.closest(selector);
      if (matched && parent.contains(matched)) {
        handler.call(matched, event, matched);
        break; // 命中第一个匹配就停止
      }
    }
  }, options);
}

delegateMap(document.getElementById('app'), 'click', {
  '.save-btn':   () => console.log('保存'),
  '.delete-btn': () => console.log('删除'),
  '.edit-btn':   () => console.log('编辑'),
});

// React 16：所有合成事件委托到 document
// React 17+：委托到 root 容器
const root = ReactDOM.createRoot(document.getElementById('root'));

function App() {
  return (
    <div onClick={() => console.log('outer')}>
      <button onClick={(e) => {
        e.stopPropagation(); // 阻止合成事件冒泡
        console.log('inner');
      }}>
        点击
      </button>
    </div>
  );
}
// 点击后只输出 "inner"，因为 stopPropagation 阻止了合成事件冒泡
// 但原生事件仍会冒泡到 document（React 17 之前）