Как вы регистрируете все события, запущенные элементом в jQuery?

Question

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

1. Нажав на нее.
2. Нажав на это.
3. Вкладка в него.
4. Отстранение от него.
5. Ctrl + C и Ctrl + V на клавиатуре.
6. Щелкните правой кнопкой мыши -> Вставить.
7. Щелкните правой кнопкой мыши -> Вырезать.
8. Щелкните правой кнопкой мыши -> Копировать.
9. Перетаскивание текста из другого приложения.
10. Изменение его с помощью Javascript.
11. Изменение его с помощью инструмента отладки, такого как Firebug.

Я бы хотел отобразить его, используя console.log. Возможно ли это в Javascript / jQuery, и если да, то как мне это сделать?

Answer 1

Понятия не имею, почему никто не использует это ... (возможно, потому что это всего лишь веб-набор)

Открытая консоль:

monitorEvents(document.body); // logs all events on the body

monitorEvents(document.body, 'mouse'); // logs mouse events on the body

monitorEvents(document.body.querySelectorAll('input')); // logs all events on inputs

Answer 2

$(element).on("click mousedown mouseup focus blur keydown change",function(e){
     console.log(e);
});

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

Answer 3

Существует хороший общий способ использования коллекции .data ('events'):

function getEventsList($obj) {
    var ev = new Array(),
        events = $obj.data('events'),
        i;
    for(i in events) { ev.push(i); }
    return ev.join(' ');
}

$obj.on(getEventsList($obj), function(e) {
    console.log(e);
});

Это регистрирует каждое событие, которое уже было привязано к элементу jQuery в тот момент, когда это конкретное событие запускается. Этот код был чертовски полезен для меня много раз.

Кстати: если вы хотите, чтобы каждое возможное событие запускалось на объекте, используйте firebug: просто щелкните правой кнопкой мыши на элементе DOM на вкладке html и выберите «Журнал событий». Каждое событие затем регистрируется в консоли (иногда это немного раздражает, потому что оно регистрирует каждое движение мыши ...).

Answer 4

$('body').on("click mousedown mouseup focus blur keydown change mouseup click dblclick mousemove mouseover mouseout mousewheel keydown keyup keypress textInput touchstart touchmove touchend touchcancel resize scroll zoom focus blur select change submit reset",function(e){
     console.log(e);
}); 

Answer 5

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

let input = document.getElementById('inputId');

Object.getOwnPropertyNames(input)
  .filter(key => key.slice(0, 2) === 'on')
  .map(key => key.slice(2))
  .forEach(eventName => {
    input.addEventListener(eventName, event => {
      console.log(event.type);
      console.log(event);
    });
  });

Надеюсь, это поможет любому, кто это читает.

РЕДАКТИРОВАТЬ

Итак, я увидел еще один вопрос здесь , который был похож, так что другим предложением было бы сделать следующее:

monitorEvents(document.getElementById('inputId'));

Answer 6

Старая ветка, я знаю.Мне также нужно было что-то для мониторинга событий, и я написал это очень удобное (отличное) решение.Вы можете отслеживать все события с помощью этого хука (в Windows-программировании это называется хуком).Этот хук не влияет на работу вашего программного обеспечения / программы.

В журнале консоли вы можете увидеть что-то вроде этого:

Объяснение того, что вы видите:

В журнале консоли вы увидите все выбранные вами события (см. Ниже «Как использовать» ) и показывает тип объекта, имя (имена) класса, идентификатор, <: имя функции>, <: имя события>.Форматирование объектов подобно css.

Когда вы нажимаете кнопку или какое-либо связанное событие, вы увидите его в журнале консоли.

Код, который я написал:

function setJQueryEventHandlersDebugHooks(bMonTrigger, bMonOn, bMonOff)
{
   jQuery.fn.___getHookName___ = function()    
       {
          // First, get object name
         var sName = new String( this[0].constructor ),
         i = sName.indexOf(' ');
         sName = sName.substr( i, sName.indexOf('(')-i );    

         // Classname can be more than one, add class points to all
         if( typeof this[0].className === 'string' )
         {
           var sClasses = this[0].className.split(' ');
           sClasses[0]='.'+sClasses[0];
           sClasses = sClasses.join('.');
           sName+=sClasses;
         }
         // Get id if there is one
         sName+=(this[0].id)?('#'+this[0].id):'';
         return sName;
       };

   var bTrigger        = (typeof bMonTrigger !== "undefined")?bMonTrigger:true,
       bOn             = (typeof bMonOn !== "undefined")?bMonOn:true,
       bOff            = (typeof bMonOff !== "undefined")?bMonOff:true,
       fTriggerInherited = jQuery.fn.trigger,
       fOnInherited    = jQuery.fn.on,
       fOffInherited   = jQuery.fn.off;

   if( bTrigger )
   {
    jQuery.fn.trigger = function()
    {
     console.log( this.___getHookName___()+':trigger('+arguments[0]+')' );
     return fTriggerInherited.apply(this,arguments);
    };
   }

   if( bOn )
   {
    jQuery.fn.on = function()
    {
     if( !this[0].__hooked__ ) 
     {
       this[0].__hooked__ = true; // avoids infinite loop!
       console.log( this.___getHookName___()+':on('+arguments[0]+') - binded' );
       $(this).on( arguments[0], function(e)
       {
         console.log( $(this).___getHookName___()+':'+e.type );
       });
     }
     var uResult = fOnInherited.apply(this,arguments);
     this[0].__hooked__ = false; // reset for another event
     return uResult;
    };
   }

   if( bOff )
   {
    jQuery.fn.off = function()
    {
     if( !this[0].__unhooked__ ) 
     {
       this[0].__unhooked__ = true; // avoids infinite loop!
       console.log( this.___getHookName___()+':off('+arguments[0]+') - unbinded' );
       $(this).off( arguments[0] );
     }

     var uResult = fOffInherited.apply(this,arguments);
     this[0].__unhooked__ = false; // reset for another event
     return uResult;
    };
   }
}

Примеры использования:

Отслеживание всех событий:

setJQueryEventHandlersDebugHooks();

Мониторинг только всех триггеров:

setJQueryEventHandlersDebugHooks(true,false,false);

Мониторинг только всех включенных событий:

setJQueryEventHandlersDebugHooks(false,true,false);

Мониторинг всех отключений отменяет только:

setJQueryEventHandlersDebugHooks(false,false,true);

Примечания / примечание:

• Используйте это только для отладки,отключите его при использовании в окончательной версии продукта
• Если вы хотите увидеть все события, вы должны вызывать эту функцию сразу после загрузки jQuery
• Если вы хотите видеть только меньше событий, выможете вызвать функцию в нужное время
• Если вы хотите выполнить ее автоматически, place () ();вокруг функции

Надеюсь, это поможет!; -)

Answer 7

https://github.com/robertleeplummerjr/wiretap.js

new Wiretap({
  add: function() {
      //fire when an event is bound to element
  },
  before: function() {
      //fire just before an event executes, arguments are automatic
  },
  after: function() {
      //fire just after an event executes, arguments are automatic
  }
});

Answer 8

Просто добавьте это на страницу и никаких других забот, позаботится о вас:

$('input').live('click mousedown mouseup focus keydown change blur', function(e) {
     console.log(e);
});

Вы также можете использовать console.log ('Событие ввода:' + e.type), чтобы упростить его.

Answer 9

ШАГ 1: Проверьте events для HTML element на developer console:

ШАГ 2: Прослушайте events мы хотим захватить:

$(document).on('ch-ui-container-closed ch-ui-container-opened', function(evt){
 console.log(evt);
});

Удачи ...

Answer 10

$(document).on("click mousedown mouseup focus blur keydown change",function(e){
    console.log(e);
});