Здравствуйте, я новый программист и все еще участвую. Это код, который я пытаюсь выяснить:
<div id="buy" class="buy button">Buy</div>
Когда я нажимаю кнопку div(), выполняется какой-то код javascript, но я не знаю, было ли это. Как я могу узнать, какая функция запускается при нажатии кнопки? Некоторые способы подключения слушателя к этому элементу
Если вы используете Firefox и Firebug, вы можете попробовать установить FireQuery. Это сделает так, чтобы вы могли видеть обработчики, связанные jQuery. http://firequery.binaryage.com/
В инструментах разработчика Google Chrome (нажмите значок гаечного ключa > Инструменты > Инструменты разработчика), выберите элемент на вкладке Элементы, справа откройте панель "Слушатели событий", вы увидите все события
Вы не можете сделать это очень хорошо, просто используя 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.
Вы можете использовать Visual Event 2 "script как закладку или же script как Расширение Chrome.
Этот script показывает все события js, связанные с dom-элементами.
Используйте jQuery("#buy").data('events');
http://api.jquery.com/jQuery.data/ может быть интересным.
Обработчики событий, прикрепленные с использованием традиционного обработчика element.onclick= или HTML <element onclick="handler">, могут быть получены тривиально из свойства element.onclick из script или in-debugger.
Обработчики событий, подключенные с использованием DOM Level 2 Events, методы addEventListener и IE attachEvent вообще не могут быть извлечены из script. Уровень DOM Level 3 однажды предложил element.eventListenerList, чтобы получить всех слушателей, но неясно, приведет ли это к окончательной спецификации. Сегодня в браузере нет реализации.
Если вы используете FireFox, вы должны установить FireBug. После этого вы можете установить FireQuery, который покажет вам, какие события jQuery связаны с объектами.
Ниже я кое-что использовал в прошлом, я думаю, может быть то, что вы ищете. Это означает, что вы смотрите свойство на элементе страницы (в приведенном ниже примере это свойство документа "Заголовок" ), а затем отображается предупреждение с помощью вызова 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);
Это самый простой способ узнать, как это сделать: http://www.sprymedia.co.uk/article/Visual+Event
При работе с событиями в Javascript часто легко потерять трек о каких событиях подписались где. Это особенно верно, если вы используют большое количество событий, что характерно для современного интерфейс с прогрессивным улучшением. Библиотеки Javascript также добавить еще одну степень сложности слушателям с технической точки а с точки зрения разработчиков они, конечно, могут жизнь намного проще! Но когда все идет не так, может быть трудно проследите, почему это может быть.
Именно из-за этого я собрал ярлык Javascript, названный Visual Event, которое визуально отображает элементы на странице, которые события, подписанные на них, каковы эти события и функция, которая событие будет запускаться при срабатывании. Это в первую очередь предназначено для помогают отлаживать, но также могут быть очень интересными и информативными для просмотра подписанных событий на других страницах.
Там есть кнопка закладки, которую вы можете перетащить на панель инструментов (FF или Chrome), а затем просто нажмите кнопку на любой странице, где вы хотите увидеть прикрепленные события. Прекрасно работает! (по крайней мере, для событий, связанных с jQuery или другими библиотеками).
Используете ли вы 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). Это может помочь вам выполнить дальнейшую отладку и отслеживание.
<script>$("#buy") и что-то упоминающее onClick или .on("click",function(){...});document.getElementById("buy")function или код, где код обработчика событий $("#buy") - это способ JQuery найти элемент, который имеет атрибут id buy, и если он имеет ., следуя ему с некоторой функцией, эта функция действует на элемент, который был найден JQuery.