Как проверить есть ли событие (jQuery)

Чтобы проверить висит ли на элементе jQuery какое-либо событие сперва нужно получить список всех событий, а затем проверить есть ли в этом список искомое событие.

Функции eventsList(), checkEvent()

В примере реализовано 2 функции: eventsList(element) — получение списка событий и checkEvent(element, eventname) — проверка наличия события в элементе.

<!DOCTYPE html> <html> <head> <title>Как проверить есть ли событие (jQuery)</title> <script src="/js/jquery.js"></script> <script> /** * Получить список событий, которые висят на элементе * @param object element jQuery элемент * @returns object|false */ function eventsList(element) { // В разных версиях jQuery список событий получается по-разному var events = element.data('events'); if (events !== undefined) return events; events = $.data(element, 'events'); if (events !== undefined) return events; events = $._data(element, 'events'); if (events !== undefined) return events; events = $._data(element[0], 'events'); if (events !== undefined) return events; return false; } /** * Проверить есть ли событие eventname на элементе element * @param object element jQuery-элемент * @param string eventname название события * @returns bool */ function checkEvent(element, eventname) { var events, ret = false; events = eventsList(element); if (events) { $.each(events, function(evName, e) { if (evName == eventname) { ret = true; } }); } return ret; } $(document).ready(function(){ var b1 = $('#b1'), b2 = $('#b2'); b1.bind('click', function(){ alert('You clicked ' + $(this).attr('id')); }); $('#check').click(function(){ var b1 = $('#b1'), b2 = $('#b2'); if (checkEvent(b1, 'click')) { alert('Кнопка "Кнопка #1" СОДЕРЖИТ событие CLICK'); } else { alert('Кнопка "Кнопка #1" НЕ СОДЕРЖИТ событие CLICK'); } if (checkEvent(b2, 'click')) { alert('Кнопка "Кнопка #2" СОДЕРЖИТ событие CLICK'); } else { alert('Кнопка "Кнопка #2" НЕ СОДЕРЖИТ событие CLICK'); } }); }); </script> </head> <body> <table> <tr> <td> <input type="button" id="b1" value="Кнопка #1"/> </td> <td> <input type="button" id="b2" value="Кнопка #2"/> </td> </tr> <tr> <td colspan="2"> <input type="button" id="check" value="Проверить события click"/> </td> </tr> </table> </body> </html>

Результат

В результате при нажатии на кнопку Проверить события click, будет последовательно показано два алерт-сообщения:

Кнопка "Кнопка #1" СОДЕРЖИТ событие CLICK

и

Кнопка "Кнопка #2" НЕ СОДЕРЖИТ событие CLICK

Категории

ПрограммированиеJavaScriptБиблиотекиjQuery

Читайте также

Комментарии