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

Posted 2023-02-22

【中文标题】如何获取与 DOM 元素关联的事件？

【英文标题】：How to get Events associated with DOM elements?

【发布时间】：2011-10-14 21:47:30

【问题描述】：

我有一个 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() 等。

谢谢

【问题讨论】：

这取决于事件是如何附加到元素上的。

***.com/questions/446892/…的可能重复

你能更好地解释一下events是什么意思吗？您想将事件附加到元素，还是想知道可以绑定到哪些事件？

谢谢菲利克斯，但你能详细说明一下吗？我是这个领域的初学者。

假设您想要获取 事件处理程序，您只能将它们附加为 inline 作为 HTML 属性或属性。无论如何，我建议阅读these articles on quirksmode.org，它对 javascript 中的事件处理进行了非常全面的介绍（点击链接）。

【参考方案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()。

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

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

【参考方案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/

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

【讨论】：

这与您是否可以提供帮助无关，从来没有。这完全取决于你有多在乎。非常感谢您的回复。

【参考方案3】：

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

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

function onclick()

    login()

这是我调用按钮的 onClick 的方法 同样，我们可以检查许多其他内容，例如： document.forms[i].elements[j].onblur document.forms[i].elements[j].onfocus 等等等等

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

【讨论】：

这个答案是我在特定情况下寻找的答案，否则 Chris 的答案是我想要提前提出的答案。+1 给 Chris。

【参考方案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。

【讨论】：

有一个使用此代码的快捷方式：打开您的页面并将代码复制粘贴到地址栏上，如javascript:code