如何在Javascript中侦听元素方法调用
我想听方法调用。
例如,当元素在文档中添加任何内容时,我希望将该元素传递给它以对其执行操作,例如:
//某处
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对象包装在外观中,并将其用于所有元素访问。这需要更多的工作,但是我们将能够以相同的方式处理所有浏览器,并能够轻松添加/删除侦听器。我不确定它是否会比自定义函数有用,但值得一看。