Chrome扩展优化：高效绑定文本字段事件监听方案问询

核心优化思路：避免全DOM遍历，聚焦按需绑定 #

不需要一次性遍历所有DOM元素绑定事件，推荐两种更高效的方案：全局事件委托或聚焦时动态绑定，天然覆盖动态元素，同时简化Shadow DOM和iframe的处理。

方案1：全局事件委托（最优解，覆盖静态/动态元素） #

利用事件冒泡机制，直接在document上监听事件，通过判断目标元素类型触发逻辑，无需逐个绑定，自动支持动态添加的元素。结合composed: true参数，可穿透Shadow DOM捕获事件。

// 监听全局keydown事件，自动匹配所有文本字段
document.addEventListener('keydown', (e) => {
  const target = e.target;
  // 判断是否为目标文本字段
  const isTextInput = 
    (target.tagName === 'INPUT' && target.type === 'text') ||
    target.tagName === 'TEXTAREA' ||
    target.isContentEditable;

  if (isTextInput) {
    // 这里执行你的业务逻辑
    console.log('触发文本字段按键事件', target);
  }
}, { capture: true, composed: true });

方案2：仅绑定激活元素（极致性能，聚焦才监听） #

如果只需要处理当前可见/激活的文本字段，可以监听focus/blur事件，仅在元素获得焦点时绑定事件，失去焦点时解绑，彻底避免无效监听。

let currentActiveInput = null;

// 绑定事件的辅助函数
function bindInputEvents(input) {
  const handleKeydown = () => { /* 你的业务逻辑 */ };
  input.addEventListener('keydown', handleKeydown);
  // 存储解绑方法，方便移除监听
  input._unbind = () => input.removeEventListener('keydown', handleKeydown);
}

// 聚焦时绑定事件
document.addEventListener('focus', (e) => {
  const target = e.target;
  const isTextInput = 
    (target.tagName === 'INPUT' && target.type === 'text') ||
    target.tagName === 'TEXTAREA' ||
    target.isContentEditable;

  if (isTextInput && target !== currentActiveInput) {
    // 解绑上一个激活元素的事件
    currentActiveInput?._unbind();
    // 绑定当前元素
    bindInputEvents(target);
    currentActiveInput = target;
  }
}, { capture: true, composed: true });

// 失焦时解绑事件
document.addEventListener('blur', () => {
  currentActiveInput?._unbind();
  currentActiveInput = null;
}, { capture: true, composed: true });

处理iframe的补充逻辑 #

对于同源iframe，需要在其加载完成后注入事件监听；跨域iframe无法直接访问，只能忽略。

function setupIframeListeners() {
  // 处理已存在的iframe
  document.querySelectorAll('iframe').forEach(iframe => {
    try {
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      // 复用全局事件委托逻辑
      iframeDoc.addEventListener('keydown', (e) => {
        const target = e.target;
        const isTextInput = 
          (target.tagName === 'INPUT' && target.type === 'text') ||
          target.tagName === 'TEXTAREA' ||
          target.isContentEditable;
        if (isTextInput) {
          // 执行你的逻辑
        }
      }, { capture: true, composed: true });
    } catch (e) {
      // 跨域iframe无权限，跳过
    }
  });

  // 监听动态添加的iframe
  const iframeObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'IFRAME') {
          node.addEventListener('load', () => setupIframeListeners());
        }
      });
    });
  });
  iframeObserver.observe(document.body, { childList: true, subtree: true });
}

// 初始化iframe监听
setupIframeListeners();

精简版深层激活元素获取（替代你的getActiveElement） #

利用可选链语法简化递归逻辑，同时支持Shadow DOM和iframe：

const getDeepActiveElement = (element = document.activeElement) => {
  const target = element.shadowRoot?.activeElement || element.contentDocument?.activeElement;
  return target ? getDeepActiveElement(target) : element;
};

方案对比 #

内容的提问来源于stack exchange，提问作者SkyRar