Как можно отследить все события во времени происходящие с определенным DOM элементом?
Доброго времени суток! Как можно отследить все события во времени происходящие с определенным DOM элементом?
На сайте есть фильтр с помощью которого можно задать определенные критерии поиска. Выглядит примерно в виде div'а с таблицей внутри, который появляется при клике на специально заданный для этого <a> элемент в виде картинки. Таблица содержит строки с ключевыми словами, в одной строке одно слово. Если неоходимо чтобы в поиске выдавался результат с вхождениями этих слов, то для каждого слова нужно нажать на картинку-кнопку, далее создается на лету эта таблица в DOM и показывается. Теперь нужно просто кликнуть по строке с нужным словом, таблица пропадает, а на экране в определенной, назовем ее служебной, строке появляется это слово как подтверждение того что оно включено в поиск (если выбрано несколько слов, то они там появляются через запятую). При этом при паведении мыши на какую то строку из таблицы она подсвечивается через css меняя свой класс на нужный+hover и после этого я кликаю по строке. И так нужно проделать с каждым словом вхождение которого в поиске мне нужно увидеть - заново открыть таблицу и выбрать слово. К сожалению, много информации предоставить не смогу т.к. сайт является чем то вроде БД для внутреннего использования на работе. Проблема в том что постоянно приходиться задавать много слов для поиска и каждый раз вручную их все выбирать. Frontend сделан на js, где само ядро занимает больше 150к символов, не считая подключенных библиотек jquery, yui и небольших задающих какую то базовую структруру для данной страницы js скриптов и мне очень сложно сориентироваться в коде так как я только начал изучать js. Страницы практически полностью генерируются javascript'ом динамически. Я хотел бы написать скрипт позволяющий этот процесс автоматизировать, хотя бы на уровне автоматического выбора нужных слов в виде событий сгенерированных js. Т.е. чтобы скрипт сам клинкал на кнопку-картинку для появления таблицы и потом кликал на нужные мне строки. Если с появлением самой таблицы все просто (я по этому элементу делаю element.click() ), то выбором строки все сложно. Если по нужному елементу строке выпонить .click() то ничего просто не сработает. Другие события типа маусовер, маусдаун и прочие так же не срабатывают. Но стоит обычной мышкой просто навести на любую строку из таблицы чтобы она подсветилась и выполнить после этого .click() скрипт в консоле по любой строке - клик срабатывеет, таблица изчезает, а в определенной служебной строке появляется слово как подтверждение того что оно добавленно в поиск. Но слово это из той строки на которую я вручную наводил мышку, а не слово из строки по которому я совершал элемент клик скрипт. Я пологаю что сдесь нужно какое то другое событие, возможно искуственное из js frontenda, или какая то комбинация событий с определенной последовательностью. И тут у меня появился вопрос, как можно отследить происходящие с элементом события при работе обычной мышкой, чтобы потом их повторить скриптом. Возможно я не правльно формулирую вопрос или мне нужно что то другое, но надеюсь суть вы поняли. Если смотреть через панель разработки хрома, то на всех почти элементах страницы висит один и тот же обработчик в виде абстрактной функции из ядра js frontenda, но из-за его большого объема и пока сложной для меня структуры мне сложно отследить таким образом события. Просто менять ту служебную строку или строки из таблицы в html не получиться, приводит к ошибке в поиске.
Последний раз редактировалось Tex, 25.10.2015 в 23:23.
|