如何获取与DOM元素相关的事件?

时间:2011-07-28 08:02:25

标签: javascript dom javascript-events

我有一份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或任何与onBlur()等相关的事件中获取onClick。

由于

4 个答案:

答案 0 :(得分:3)

正如费利克斯在评论中所说,有几种方法可以在一个物体上注册一个事件。那么如何将事件附加到对象并以某种方式将它们序列化到xml取决于它们的注册方式。我将列出一些关于如何将它们用于序列化的想法。

1个在线注册的处理程序

1.1完全内联代码:

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

当代码完全内联时,您只需获取xml中的属性并保存即可。

2.1内联函数调用      

在这种情况下,您必须导出函数的声明。在JavaScript中,函数本身就是对象,因此您可以通过调用myFunc.toString()来实际获取函数的声明文本。对此的困难之处在于,如果这是一个函数调用,那么声明是否要导出。

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

如果您已通过ie:

添加了所有元素处理程序
function myFunc(num){
  alert("Your number is: " + num);
}

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

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

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

我希望这有助于让你更进一步。

答案 1 :(得分:1)

这可能不是你想要的,但可能会帮助你至少看看你需要看哪个DOM部分 - 你可以获得一个firebug的插件,它显示绑定到DOM元素的任何jQuery事件,称为firequery ,我认为firebug本身可以在正常的JS中显示附加事件。

考虑到firebug是用JS编写的,显然必须有办法。 不幸的是,我没有时间自己查看来源(我想:D),但你可以在这里找到回购:http://code.google.com/p/fbug/source/browse/branches/firebug1.8/content/firebug/

抱歉,我不能得到更多的帮助和好运

答案 2 :(得分:1)

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

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

function onclick()
{
    login()
}

以下是我点击按钮的方法 类似地,我们可以检查许多其他如:

document.forms [I] .elements [j]的.onblur
document.forms [i] .elements [j] .onfocus等等。


非常感谢所有人对这个问题感兴趣。

答案 3 :(得分:0)

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

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

这将使页面禁用并使用图标突出显示所有事件,并通过将光标放在该图标上来显示他们正在做什么。

(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了解详情。