如何为document.createElement及toDataURL函数添加监听？

一、监听document.createElement调用 #

要实现调用document.createElement时触发自定义逻辑，核心思路是函数劫持——先保存原生方法，重写后注入自定义行为：

// 缓存原生createElement方法
const originalCreateElement = document.createElement;

// 重写document.createElement
document.createElement = function(tagName) {
  // 调用原生方法创建元素
  const element = originalCreateElement.call(this, tagName);
  
  // 针对canvas标签触发自定义逻辑（可根据需求修改判断条件）
  if (tagName.toLowerCase() === 'canvas') {
    console.log("createElement worked");
  }
  
  return element;
};

// 测试
const canvas = document.createElement("canvas"); // 控制台输出"createElement worked"

如果需要监听所有createElement调用（无论创建什么标签），直接去掉if判断即可。

二、监听Canvas的toDataURL方法 #

toDataURL是HTMLCanvasElement原型上的方法，同样用劫持原型方法的方式实现监听：

// 缓存原生toDataURL方法
const originalToDataURL = HTMLCanvasElement.prototype.toDataURL;

// 重写原型方法
HTMLCanvasElement.prototype.toDataURL = function(type, encoderOptions) {
  // 调用原生方法获取结果
  const result = originalToDataURL.call(this, type, encoderOptions);
  
  // 触发自定义逻辑
  console.log("toDataURL worked");
  
  return result;
};

// 测试
const str = canvas.toDataURL("image/png"); // 控制台输出"toDataURL worked"

可选：监听特定Canvas实例的toDataURL

如果不想影响所有Canvas实例，可单独给目标实例重写方法：

const myCanvas = document.createElement("canvas");
// 缓存该实例的原生方法
const instanceToDataURL = myCanvas.toDataURL;

// 重写该实例的方法
myCanvas.toDataURL = function(type, encoderOptions) {
  const result = instanceToDataURL.call(this, type, encoderOptions);
  console.log("特定实例的toDataURL被调用");
  return result;
};

关键注意事项 #

• 必须用call/apply调用原生方法，确保this指向正确（比如document.createElement的this要指向document，Canvas方法的this要指向当前实例）
• 重写方法时需完整保留原生方法的参数和返回值，避免破坏原有功能

内容的提问来源于stack exchange，提问作者Николай Сычев