利用firefox开发工具中寻找事件

随着页面的复杂, 一个节点中可能会注册各种事件处理函数, 你可能不知道到底是哪个函数被注册,哪个函数被使用. 我现在碰到的问题是一个input ,当在input中输入一些什么东西时,它会运行一段代码. 它并没有注册onchange函数, 模拟使用keydown, keypress等也没有成功. 最后通过firebug知道,它是调用了oninput事件的处理函数. 但是依然, 我在这个节点中看到的oninput函数是null.  所以这个问题有些莫名其妙 . 最终, 我通过向这个节点模拟发送一个input事件来调用了这个神秘的函数(因为并不是oninput函数).

在firefox开发工具中查找注册过的函数,如下图所示:

firebug

在调试状态下,点击事件可以看到所有注册过的事件.选中感兴趣的事件函数,可以在这个事件被调用时停下来. 在给定事件函数运行完后,你感兴趣的事情发生了,那就可以确定那个事件处理函数是这个了.

要模拟这个事件, 在debug时可以看到事件的所有参数,因此可以由此来模拟这个事件. 方法为:

var e = new InputEvent(“input”);
//document.getElementById(“appleid”).oninput(); 这个函数并没有被注册,因此这个问题有些奇怪. 目前还没搞清楚.
document.getElementById(“appleid”).dispatchEvent(e);

 

另外如果要列出这个某个节点上注册过的所有的函数,基本方法为,可以在控制台(console)中, 可以利用aa=document.getElementById(‘interetedId’) , 然后看aa.on<focus> 等等函数是不是被定义.  这样做可行,但是要一个一个的去看,还是有些麻烦.

好一点的方法为, 在这个节点的某个事件函数停下来,然后在这个事件的参数中,可以看到这个节点,然后在debug中可以看到这个节点上定义的所有函数. 比如上面的那个节点中,可以看到oninput函数没有定义.

ff2

注: firebug是另外一个firefox的addon , 不同于firefox自带的这个开发工具. firebug的功能和这个开发工具差不多. 下面是一个firebug的截图:

firebug



本文地址: http://www.bagualu.net/wordpress/archives/5120 转载请注明




发表评论

电子邮件地址不会被公开。 必填项已用*标注