Как получить события, связанные с элементами DOM?

У меня есть HTML-документ.
Можно получить события, связанные с каждым элементом в определенном элементе FORM в документе, используя javascript.

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

Таким образом, я могу получить j -й элемент в i -й форме, но могу ли я получить событие, связанное с элементом. В форме может быть любое количество элементов. Я использую 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()' />

Все, что я хочу сделать, это получить onClick в моем XML или любом событии, связанном с onBlur() и т.д.

Спасибо

ОТВЕТЫ

Ответ 1

Как сказал в своем комментарии Феликс, существует несколько способов зарегистрировать событие на объекте. Итак, как вы можете получать события, привязанные к объекту, и их сериализовать как-то на ваш xml, зависит от того, как они зарегистрированы. Я перечислил некоторые мысли о том, как вы можете получить их для сериализации.

1 Обработчики, зарегистрированные в строке

1.1 Полностью встроенный код:

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

Когда код полностью встроен, вы можете просто получить атрибут в своем xml и сохранить его.

2.1 Внутренний вызов функции    

В этом случае вам придется экспортировать объявление функции. В JavaScript Функции - это объекты, поэтому вы можете фактически получить текст объявления своей функции, вызвав myFunc.toString(). Жесткая часть этого будет заключаться в том, чтобы выяснить, является ли это вызов функции, где декларация должна быть экспортирована или нет.

2 Обработчики, зарегистрированные через атрибуты

Если вы добавили все обработчики элементов через i.e.:

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

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

вы можете просто перебирать элементы формы, как вы уже делали, и получать onlick, onmouseover, onblur, on.... свойства по одному и сохранять их в xml. Кроме того, в этом случае содержимое этих свойств будет также объектами Function, чтобы сохранить их фактическое содержимое, которое вы должны сделать .toString() в объекте Function.

Кроме того, существуют другие способы регистрации обработчиков событий в зависимости от разных браузеров. Поэтому, если вы точно знаете, как регистрируются ваши события, вы можете их сериализовать. Если вы этого не сделаете, это будет очень сложно.

Я надеюсь, что это поможет вам немного дальше.

Ответ 2

Это, вероятно, не то, что вы ищете, но может помочь вам по крайней мере увидеть, какую часть DOM вам нужно искать - вы можете получить плагин для firebug, который показывает любые события jQuery, связанные с элементами DOM, называемыми firequery, и я думаю, что Firebug сам по себе может показывать приложенные события в обычном JS.

Учитывая, что firebug написан в JS, очевидно, должен быть способ сделать это. К сожалению, у меня нет времени самостоятельно пройти через источник (я бы хотел: D), но здесь вы можете найти репо: 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 [я].elements [J].onblur
document.forms [i].elements [j].onfocus и т.д. и т.д.



Большое спасибо всем за интерес к этому вопросу.

Ответ 4

Существует очень хорошее средство визуальное событие, которое визуально отображает все события, связанные с элементом.

Добавьте следующий код в конце каждой страницы, которую вы хотите контролировать.

Это сделает страницу отключенной и выделит все события с помощью значков, а также покажет, что они делают, наведя курсор на этот значок.

(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);
    }
})();

Подробнее читайте визуальное событие.