如何在Javascript中侦听元素方法调用

时间:2020-03-06 14:43:53  来源:igfitidea点击:

我想听方法调用。

例如,当元素在文档中添加任何内容时,我希望将该元素传递给它以对其执行操作,例如:

//某处

aParent.appendChild(aChild);

//当使用前者时,我将定义为监听器的函数以aChild作为参数调用

有人知道该怎么做吗?

解决方案

不知道核心功能是否可行,但是对于要监视的动作,我们始终可以创建自己的功能:

function AppendChild(oParent, oChild) {

   // your stuff on oParent

   // append oChild
   oParent.appendChild(oChild)
}

或者,也许修改实际的appendChild(),但这很棘手...

我知道Dojo Toolkit提供了此功能。我们可以在此处跳至"将功能相互连接"部分进行一些说明。如果我们有兴趣,可以查看dojo.connect的源代码以了解发生了什么。

在Firefox中,我们可以重写Node.prototype.appendChild以调用我们自己的函数(先保存原始的appendChild,然后在其中调用它)以执行其他操作。

Node.prototype._appendChild = Node.prototype.appendChild;
Node.prototype.appendChild = function myFunct(el){....; this._appendChild(el);}

Internet Explorer没有实现这些接口(但是可能有一种解决方法,可能使用.htc ..)。 IE8将具有Element而不是Node。

我们要描述的是面向方面的编程。用AOP的话来说,"连接点"将是element.appendChild(),而"建议"是我们希望在每个匹配的连接点执行之前(或者之后)执行的功能。

一段时间以来,我一直对JavaScript AOP的可能性非常感兴趣,而且我刚刚发现了这种面向方面的编程和javascript,它看起来很有希望,而无需采用大型的旧API。我真的很高兴你提出了这个。我有此用途,例如临时日志记录,定时代码段等。

多个浏览器以不同的方式处理DOM,不幸的是IE处理事物的方式没有Mozilla那样强大。最简单的方法是使用自定义函数,例如Filini提到的函数。

但是,我们也可以将不同的浏览器DOM对象包装在外观中,并将其用于所有元素访问。这需要更多的工作,但是我们将能够以相同的方式处理所有浏览器,并能够轻松添加/删除侦听器。我不确定它是否会比自定义函数有用,但值得一看。