如何获取与 DOM 元素关联的事件？

Question

我有一个 HTML 文档。
可以使用 javascript 获取与文档中特定 FORM 元素中的每个元素相关联的 事件。

var element = document.forms[i].elements[j];

这样我可以得到 i 形式的第 j 个元素，但是我可以得到与该元素关联的事件吗。
一个表单中可以有任意数量的元素。我使用的是 IE 8。


谢谢

---

编辑：
实际上我是在尝试将 HTML DOM 序列化为 XML。

我这样做是：

createXML : function() {

        objSerializeDOM.msg += "";
        objSerializeDOM.msg += "<?xml version='1.0' encoding='UTF-8'?>\n\n";
        // Get all the forms in a document.
        var forms = document.forms;

        for ( var i = 0; i < forms.length; i++) {
            // Get all the elements on per form basis.
            elements = document.forms[i].elements;
            objSerializeDOM.msg += "<FORM name=\"" + forms[i].name + "\" method=\""
                    + forms[i].method + "\" action=\"" + forms[i].action + "\">\n\n";
            for ( var j = 0; j < elements.length; j++) {
                objSerializeDOM.msg += "    <" + elements[j].tagName + "  type=\""
                        + elements[j].type + "\"" + "  name=\""
                        + elements[j].name + "\"" + "   Value =\""
                        + elements[j].value + "\"  />\n";
            }
            alert(document.forms[i].elements[1].event);
        }
        objSerializeDOM.msg += "\n\n</FORM>\n\n";
        alert(objSerializeDOM.msg);
        objSerializeDOM.writeToFile(objSerializeDOM.msg);
    }

我从中得到的是一个 XML：

<?xml version='1.0' encoding='UTF-8'?>

<FORM name="loginForm" method="post" action="/sigma/login.do;jsessionid=E6509E7BA55573AA5386274ABB93F718">

    <INPUT  type="hidden"  name="message"   Value =""  />
    <INPUT  type="hidden"  name="userAction"   Value =""  />
    <INPUT  type="text"  name="userId"   Value =""  />
    <INPUT  type="password"  name="passwd"   Value =""  />
    <INPUT  type="button"  name="button"   Value ="Continue"  />


</FORM>

现在假设我有：

<input tabindex="7" name="button" type="button" class="button"
                style="width:100;height:30" Value="Continue" onclick='login()' />

我现在要做的就是在我的 XML 中获取 onClick 或任何关联的事件，如 onBlur() 等。

谢谢

Answer 1

正如 Felix 在他的评论中所说，有几种方法可以在对象上注册事件。因此，如何获取附加到对象的事件并以某种方式将它们序列化到您的 xml 取决于它们的注册方式。我将列出一些关于如何让它们进行序列化的想法。

1 个内联注册的处理程序

1.1 完全内联代码：

<INPUT  type="hidden"  name="message"   Value =""  onclick="alert('hello')"/>

当代码完全内联时，你可以在你的xml中获取属性并保存它。

2.1 内联函数调用

在这种情况下，您必须导出函数的声明。在 JavaScript 中，函数本身就是对象，因此您实际上可以通过调用 myFunc.toString() 来获取函数的声明文本。最困难的部分是弄清楚这是否是一个函数调用，声明必须被导出。

2个通过属性注册的处理程序

如果您已通过以下方式添加所有元素处理程序：

function myFunc(num){
  alert("Your number is: " + num);
}

document.getElementById('myElement').onclick = myFunc;

你可以像你已经做的那样迭代你的表单元素，并获得 onlick、onmouseover、onblur、on.... 属性，然后将它们保存到 xml。同样在这种情况下，此属性的内容也将是函数对象，因此要保存它们的实际内容，您必须在函数对象上执行.toString()。

此外，根据不同的浏览器，还有一些其他方法可以注册事件处理程序。因此，如果您明确知道您的事件是如何注册的，那么您实际上可以对它们进行序列化。如果你不这样做，那将是非常困难的。

我希望这有助于你走得更远。

Answer 2

这可能不是您要查找的内容，但可以帮助您至少了解需要查看 DOM 的哪一部分 - 您可以获得一个 firebug 插件，它显示任何绑定到名为 firequery 的 DOM 元素的 jQuery 事件，我认为firebug本身可以在普通JS中显示附加事件。

考虑到firebug是用JS编写的，显然必须有办法做到这一点。 不幸的是，我自己没有时间浏览源代码（我想 :D ）但你可以在这里找到 repo：http://code.google.com/p/fbug/source/browse/branches/firebug1.8/content/firebug/

抱歉，我无法提供更多帮助，祝你好运

Answer 3

虽然回答我自己的问题看起来很奇怪，但可能会对某些人有所帮助：

我做了一些研究，发现： document.forms[i].elements[j].onclick 将返回

function onclick()
{
    login()
}

这是我调用按钮的 onClick 的方法
同样，我们可以检查许多其他内容，例如：

document.forms[i].elements[j].onblur
document.forms[i].elements[j].onfocus 等等等等

非常感谢大家对这个问题感兴趣。

Answer 4

有一个非常好的工具visual event，可以直观地显示与元素相关的所有事件。

在您要监控的每个页面的末尾添加以下代码。

这将使页面禁用并突出显示所有带有图标的事件，并通过将光标移到该图标上来显示它们正在执行的操作。

(function()
{
    if(typeof VisualEvent!='undefined')
    {
        if(document.getElementById('Event_display'))
        {
            VisualEvent.fnClose();
        }else{
            VisualEvent.fnInit();
        }
    }else
    {
        var n=document.createElement('script');
        n.setAttribute('language','JavaScript');
        n.setAttribute('src','http://www.sprymedia.co.uk/design/event/media/js/event-loader.js');
        document.body.appendChild(n);
    }
})();

详情请阅读visual event。