javascript - 监听 Javascript 中的函数

Question

我正在使用我不想修改的第三方脚本。

在此脚本中，我需要监听一个向 dom 节点添加类的函数。

  function _showElement(targetElement) {
      targetElement.element.className += 'this-class';
  }

我想做的是监听这个元素被调用，并且每当它使用纯javascript向其父级添加一个类时。

function addThis() {
    var doc = document;
    liveEl = doc.getElementsByName("this-class");
    // Code to add class to parent
}

Answer 1

最简单的“暴力”解决方案是劫持(重新定义)函数:

function _showElement(targetElement) {
  console.log('original');
}

_showElement(); // hijacked


function _showElement(targetElement) {
  console.log('hijacked');
}

不幸的是，我认为您无法保存该函数的原始行为，因此您需要复制粘贴它:

function _showElement(targetElement) {
  targetElement.element.className += 'this-class';
  addThis()
}

<小时/>

另一种解决方案，更具体地解决您的问题(当元素的 className 更改时执行某些操作)，您可以监听 DOM 上的突变事件:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

基本上，您创建一个 MutationObserver 并观察元素上的属性更改。如果您需要跟踪所有节点，这可能不是一个很好的解决方案，但在某些情况下它可能会派上用场。