Как я могу увидеть событие, прикрепленное к элементу html?

Ответ 1

Если вы используете Firefox и Firebug, вы можете попробовать установить FireQuery. Это сделает так, чтобы вы могли видеть обработчики, связанные jQuery. http://firequery.binaryage.com/

Ответ 2

В инструментах разработчика Google Chrome (нажмите значок гаечного ключa > Инструменты > Инструменты разработчика), выберите элемент на вкладке Элементы, справа откройте панель "Слушатели событий", вы увидите все события

Ответ 3

Вы не можете сделать это очень хорошо, просто используя ECMAscript. Например, если был обработчик события щелчка, добавленный DOM Level 1 в форме

document.getElementById('buy').onclick = function() {};

вы можете, конечно, легко перехватить это свойство в самой node. Все усложняется, если DOM Level 2 вступает в игру с .addEventListener() уважительно .attachEvent(). Теперь у вас действительно нет "места" для поиска, где все разные функции прослушивания, где привязаны.

Это улучшается с помощью jQuery. jQuery будет удерживать все функции обработчика событий в специальном объекте, который связан с вызовом DOM node. Вы можете проверить это, получив свойство .data() -expando для node, например

$('#buy').data('events');

Однако теперь я уже описал три разных способа привязки прослушивателей событий к node (на самом деле его два, потому что библиотека, подобная jQuery, также использует методы уровня DOM Level 1 или 2).

Это действительно становится уродливым, если событие инициируется делегированием. Это означает, что мы связали событие click на каком-то родительском - node, просто ожидая, что это событие будирует до нас, чтобы мы могли проверить target. Итак, теперь мы даже не имеем прямой связи между node и event listener.

Заключение здесь - просмотр плагина браузера или, возможно, вещь вроде VisualEvent.

Ответ 4

Вы можете использовать Visual Event 2 "script как закладку или же script как Расширение Chrome.

Этот script показывает все события js, связанные с dom-элементами.

Ответ 5

Используйте jQuery("#buy").data('events');

http://api.jquery.com/jQuery.data/ может быть интересным.

Ответ 6

Обработчики событий, прикрепленные с использованием традиционного обработчика element.onclick= или HTML <element onclick="handler">, могут быть получены тривиально из свойства element.onclick из script или in-debugger.

Обработчики событий, подключенные с использованием DOM Level 2 Events, методы addEventListener и IE attachEvent вообще не могут быть извлечены из script. Уровень DOM Level 3 однажды предложил element.eventListenerList, чтобы получить всех слушателей, но неясно, приведет ли это к окончательной спецификации. Сегодня в браузере нет реализации.

Ответ 7

Если вы используете FireFox, вы должны установить FireBug. После этого вы можете установить FireQuery, который покажет вам, какие события jQuery связаны с объектами.

http://getfirebug.com/

http://firequery.binaryage.com/

Ответ 8

Ниже я кое-что использовал в прошлом, я думаю, может быть то, что вы ищете. Это означает, что вы смотрите свойство на элементе страницы (в приведенном ниже примере это свойство документа "Заголовок" ), а затем отображается предупреждение с помощью вызова JS при каждом изменении этого свойства. Вам нужно получить это в DOM, прежде чем какой-либо код вы пытаетесь найти пожары, но, надеюсь, вы сможете определить, что вызывает проблему.

Я бы рекомендовал использовать Firefox и получить Firebug для отладки JavaScript.

// Call stack code
function showCallStack() {
   var f=showCallStack,result="Call stack:\n";

   while((f=f.caller)!==null) {
      var sFunctionName = f.toString().match(/^function (\w+)\(/)
      sFunctionName = (sFunctionName) ? sFunctionName[1] : 'anonymous function';
      result += sFunctionName;
      result += getArguments(f.toString(), f.arguments);
      result += "\n";
   }
   alert(result);
}


function getArguments(sFunction, a) {
   var i = sFunction.indexOf(' ');
   var ii = sFunction.indexOf('(');
   var iii = sFunction.indexOf(')');
   var aArgs = sFunction.substr(ii+1, iii-ii-1).split(',')
   var sArgs = ''; 
   for(var i=0; i<a.length; i++) {
      var q = ('string' == typeof a[i]) ? '"' : '';
      sArgs+=((i>0) ? ', ' : '')+(typeof a[i])+' '+aArgs[i]+':'+q+a[i]+q+'';
   }
   return '('+sArgs+')';
} 

var watchTitle = function(id, oldval, newval) { showCallStack(); }

// !! This is all you should need to update, setting it to whatever you want to watch.
document.watch("title", watchTitle);  

Ответ 9

Это самый простой способ узнать, как это сделать: http://www.sprymedia.co.uk/article/Visual+Event

При работе с событиями в Javascript часто легко потерять трек о каких событиях подписались где. Это особенно верно, если вы используют большое количество событий, что характерно для современного интерфейс с прогрессивным улучшением. Библиотеки Javascript также добавить еще одну степень сложности слушателям с технической точки а с точки зрения разработчиков они, конечно, могут жизнь намного проще! Но когда все идет не так, может быть трудно проследите, почему это может быть.

Именно из-за этого я собрал ярлык Javascript, названный Visual Event, которое визуально отображает элементы на странице, которые события, подписанные на них, каковы эти события и функция, которая событие будет запускаться при срабатывании. Это в первую очередь предназначено для помогают отлаживать, но также могут быть очень интересными и информативными для просмотра подписанных событий на других страницах.

Там есть кнопка закладки, которую вы можете перетащить на панель инструментов (FF или Chrome), а затем просто нажмите кнопку на любой странице, где вы хотите увидеть прикрепленные события. Прекрасно работает! (по крайней мере, для событий, связанных с jQuery или другими библиотеками).

Ответ 10

Используете ли вы jQuery? Если это так, вы хотите найти одну из этих трех строк кода:

$("#buy").click //the div is refered by its id

или

$(".buy").click //the div is refered to by the style "buy"

или

$(".button").click //refered to by the style "button"

В большинстве новых браузеров есть встроенные в них инструменты разработчика, нажав F12 (по крайней мере, в IE и Chrome). Это может помочь вам выполнить дальнейшую отладку и отслеживание.

Ответ 11

• Щелкните правой кнопкой мыши страницу и выберите просмотр источника страницы.
• Найти теги <script>
• Ищите $("#buy") и что-то упоминающее onClick или .on("click",function(){...});
• Если вы не можете найти его, выполните поиск по этим строкам: document.getElementById("buy")
• Вы нашли function или код, где код обработчика событий

$("#buy") - это способ JQuery найти элемент, который имеет атрибут id buy, и если он имеет ., следуя ему с некоторой функцией, эта функция действует на элемент, который был найден JQuery.