আপনি jQuery এর কোনও উপাদান দ্বারা চালিত সমস্ত ইভেন্টগুলিকে কীভাবে লগ করবেন?

Question 1

কোনও ব্যবহারকারী এটির সাথে যোগাযোগ করার সাথে সাথে ইনপুট ক্ষেত্র দ্বারা চালিত সমস্ত ইভেন্টগুলি দেখতে চাই । এর মধ্যে স্টাফের মতো রয়েছে:

এটি ক্লিক করা।

এটি ক্লিক করা।

এটিতে ট্যাবিং করা হচ্ছে।

এটি থেকে দূরে ট্যাবিং।

Ctrlকীবোর্ডে + Cএবং Ctrl+ V।

ডান ক্লিক করুন -> আটকান।

ডান ক্লিক করুন -> কাটা।

রাইট ক্লিক করুন -> অনুলিপি করুন।

অন্য অ্যাপ্লিকেশন থেকে টেক্সটটি টেনে এনে ফেলে দেওয়া হচ্ছে।

এটি জাভাস্ক্রিপ্টের সাহায্যে সংশোধন করা হচ্ছে।

ফায়ারব্যাগের মতো একটি ডিবাগ সরঞ্জাম দিয়ে এটিকে সংশোধন করা হচ্ছে।

আমি এটি ব্যবহার করে প্রদর্শন করতে চাই console.log। জাভাস্ক্রিপ্ট / jQuery এ এটি কি সম্ভব এবং যদি তা হয় তবে আমি কীভাবে এটি করব?

Question 2

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

এটি আপনাকে কোনও ইভেন্ট নিক্ষেপ করা হলে প্রচুর (তবে সমস্ত নয়) তথ্য পাবে ... ম্যানুয়ালি এ জাতীয় কোডিং ব্যতীত, আমি এটি করার অন্য কোনও উপায়ের কথা ভাবতে পারি না।

Question 3

কেন কেউ এটিকে ব্যবহার করে না সে সম্পর্কে আমার ধারণা নেই ... (সম্ভবত এটি কেবল ওয়েবকিট বিষয় হিসাবে)

কনসোল খুলুন:

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

Question 4

.Data ('ইভেন্ট') সংগ্রহটি ব্যবহার করার একটি দুর্দান্ত জেনেরিক উপায় রয়েছে:

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 দ্বারা এই উপাদানটিকে ইতিমধ্যে আবদ্ধ করা হয়েছে এমন প্রতিটি ইভেন্ট লগ করে। এই কোডটি বেশ কয়েকবার আমার জন্য বেশ কার্যকর ছিল।

বিটিডব্লিউ: আপনি যদি প্রতিটি সম্ভাব্য ইভেন্টটি কোনও বস্তুতে নিক্ষেপ করা দেখতে চান তবে ফায়ারব্যাগ ব্যবহার করুন: এইচটিএমএল ট্যাবে ডম উপাদানটিতে ডান ক্লিক করুন এবং "লগ ইভেন্টগুলি" দেখুন। তারপরে প্রতিটি ইভেন্ট কনসোলে লগ হয় (এটি কখনও কখনও কিছুটা বিরক্তিকর কারণ এটি প্রতিটি মাউস চলাচলে লগ করে ...)।

Question 5

$('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);
});

Question 6

আমি জানি উত্তরটি ইতিমধ্যে এটি গ্রহণ করা হয়েছে, তবে আমি মনে করি এমন আরও কিছুটা নির্ভরযোগ্য উপায় হতে পারে যেখানে আপনাকে অগত্যা ইভেন্টটির নাম জানতে হবে না। এটি কেবল দেশীয় ইভেন্টের জন্য কাজ করে যদিও আমার জানা হিসাবে, প্লাগইনগুলির দ্বারা তৈরি কাস্টমগুলি নয়। আমি জিনিসগুলিকে কিছুটা সহজ করার জন্য 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'));

Question 7

পুরানো থ্রেড, আমি জানি। ইভেন্টগুলি নিরীক্ষণের জন্য আমারও কিছু দরকার ছিল এবং এটি খুব কার্যকর (দুর্দান্ত) সমাধান লিখেছিল। আপনি এই হুক দিয়ে সমস্ত ইভেন্ট নিরীক্ষণ করতে পারেন (উইন্ডোজ প্রোগ্রামিং এ একে হুক বলা হয়)। এই হুক আপনার সফ্টওয়্যার / প্রোগ্রামের ক্রিয়াকলাপকে প্রভাবিত করে না।

ইন কনসোল লগ ইন করুন আপনি ভালো কিছু দেখতে পারেন:

আপনি যা দেখেন তার ব্যাখ্যা:

কনসোল লগটিতে আপনি নির্বাচিত সমস্ত ইভেন্ট দেখতে পাবেন ( "কীভাবে ব্যবহার করবেন" নীচে দেখুন ) এবং অবজেক্টের ধরণ, শ্রেণিকাম (গুলি), আইডি, <: ফাংশনের নাম>, <: ইভেন্ট নাম> দেখায়। অবজেক্টের ফরম্যাটিং 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 লোড হওয়ার পরে আপনাকে সরাসরি এই ফাংশনটি কল করতে হবে
আপনি যদি কেবলমাত্র কম ইভেন্ট দেখতে চান তবে আপনি যখন প্রয়োজন তখন ফাংশনটি কল করতে পারেন
আপনি যদি এটি স্বয়ংক্রিয়ভাবে চালিত করতে চান তবে () () রাখুন; কাছাকাছি ফাংশন

আশা করি এটা সাহায্য করবে! ;-)

Question 8

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
  }
});

Question 9

এটি কেবল পৃষ্ঠায় যুক্ত করুন এবং অন্য কোনও উদ্বেগ নয়, আপনার জন্য বিশ্রামটি পরিচালনা করবে:

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

এটিকে আরও সহজ করতে আপনি কনসোল.লগ ('ইনপুট ইভেন্ট:' + e.type) ব্যবহার করতে পারেন।

Question 10

পদক্ষেপ 1: এটির `events`জন্য পরীক্ষা `HTML element`করুন `developer console`:

পদক্ষেপ 2: `events`আমরা ক্যাপচার করতে চাই তা শুনুন :

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

শুভকামনা ...

Question 11

আমি সম্প্রতি একটি বিদ্যমান এসও পোস্ট থেকে এই স্নিপেটটি খুঁজে পেয়েছি এবং এটি সংশোধন করেছি যা আমি আবার খুঁজে পেতে সক্ষম হইনি তবে আমি এটি খুব দরকারী বলে খুঁজে পেয়েছি

// specify any elements you've attached listeners to here
const nodes = [document]

// https://developer.mozilla.org/en-US/docs/Web/Events
const logBrowserEvents = () => {
  const AllEvents = {
    AnimationEvent: ['animationend', 'animationiteration', 'animationstart'],
    AudioProcessingEvent: ['audioprocess'],
    BeforeUnloadEvent: ['beforeunload'],
    CompositionEvent: [
      'compositionend',
      'compositionstart',
      'compositionupdate',
    ],
    ClipboardEvent: ['copy', 'cut', 'paste'],
    DeviceLightEvent: ['devicelight'],
    DeviceMotionEvent: ['devicemotion'],
    DeviceOrientationEvent: ['deviceorientation'],
    DeviceProximityEvent: ['deviceproximity'],
    DragEvent: [
      'drag',
      'dragend',
      'dragenter',
      'dragleave',
      'dragover',
      'dragstart',
      'drop',
    ],
    Event: [
      'DOMContentLoaded',
      'abort',
      'afterprint',
      'beforeprint',
      'cached',
      'canplay',
      'canplaythrough',
      'change',
      'chargingchange',
      'chargingtimechange',
      'checking',
      'close',
      'dischargingtimechange',
      'downloading',
      'durationchange',
      'emptied',
      'ended',
      'error',
      'fullscreenchange',
      'fullscreenerror',
      'input',
      'invalid',
      'languagechange',
      'levelchange',
      'loadeddata',
      'loadedmetadata',
      'noupdate',
      'obsolete',
      'offline',
      'online',
      'open',
      'open',
      'orientationchange',
      'pause',
      'play',
      'playing',
      'pointerlockchange',
      'pointerlockerror',
      'ratechange',
      'readystatechange',
      'reset',
      'seeked',
      'seeking',
      'stalled',
      'submit',
      'success',
      'suspend',
      'timeupdate',
      'updateready',
      'visibilitychange',
      'volumechange',
      'waiting',
    ],
    FocusEvent: [
      'DOMFocusIn',
      'DOMFocusOut',
      'Unimplemented',
      'blur',
      'focus',
      'focusin',
      'focusout',
    ],
    GamepadEvent: ['gamepadconnected', 'gamepaddisconnected'],
    HashChangeEvent: ['hashchange'],
    KeyboardEvent: ['keydown', 'keypress', 'keyup'],
    MessageEvent: ['message'],
    MouseEvent: [
      'click',
      'contextmenu',
      'dblclick',
      'mousedown',
      'mouseenter',
      'mouseleave',
      'mousemove',
      'mouseout',
      'mouseover',
      'mouseup',
      'show',
    ],
    // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events
    MutationNameEvent: ['DOMAttributeNameChanged', 'DOMElementNameChanged'],
    MutationEvent: [
      'DOMAttrModified',
      'DOMCharacterDataModified',
      'DOMNodeInserted',
      'DOMNodeInsertedIntoDocument',
      'DOMNodeRemoved',
      'DOMNodeRemovedFromDocument',
      'DOMSubtreeModified',
    ],
    OfflineAudioCompletionEvent: ['complete'],
    OtherEvent: ['blocked', 'complete', 'upgradeneeded', 'versionchange'],
    UIEvent: [
      'DOMActivate',
      'abort',
      'error',
      'load',
      'resize',
      'scroll',
      'select',
      'unload',
    ],
    PageTransitionEvent: ['pagehide', 'pageshow'],
    PopStateEvent: ['popstate'],
    ProgressEvent: [
      'abort',
      'error',
      'load',
      'loadend',
      'loadstart',
      'progress',
    ],
    SensorEvent: ['compassneedscalibration', 'Unimplemented', 'userproximity'],
    StorageEvent: ['storage'],
    SVGEvent: [
      'SVGAbort',
      'SVGError',
      'SVGLoad',
      'SVGResize',
      'SVGScroll',
      'SVGUnload',
    ],
    SVGZoomEvent: ['SVGZoom'],
    TimeEvent: ['beginEvent', 'endEvent', 'repeatEvent'],
    TouchEvent: [
      'touchcancel',
      'touchend',
      'touchenter',
      'touchleave',
      'touchmove',
      'touchstart',
    ],
    TransitionEvent: ['transitionend'],
    WheelEvent: ['wheel'],
  }

  const RecentlyLoggedDOMEventTypes = {}

  Object.keys(AllEvents).forEach((DOMEvent) => {
    const DOMEventTypes = AllEvents[DOMEvent]

    if (Object.prototype.hasOwnProperty.call(AllEvents, DOMEvent)) {
      DOMEventTypes.forEach((DOMEventType) => {
        const DOMEventCategory = `${DOMEvent} ${DOMEventType}`

        nodes.forEach((node) => {
          node.addEventListener(
            DOMEventType,
            (e) => {
              if (RecentlyLoggedDOMEventTypes[DOMEventCategory]) return

              RecentlyLoggedDOMEventTypes[DOMEventCategory] = true

              // NOTE: throttle continuous events
              setTimeout(() => {
                RecentlyLoggedDOMEventTypes[DOMEventCategory] = false
              }, 1000)

              const isActive = e.target === document.activeElement

              // https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
              const hasActiveElement = document.activeElement !== document.body

              const msg = [
                DOMEventCategory,
                'target:',
                e.target,
                ...(hasActiveElement
                  ? ['active:', document.activeElement]
                  : []),
              ]

              if (isActive) {
                console.info(...msg)
              }
            },
            true,
          )
        })
      })
    }
  })
}
logBrowserEvents()
// export default logBrowserEvents

Question 12

function bindAllEvents (el) {
  for (const key in el) {
      if (key.slice(0, 2) === 'on') {
          el.addEventListener(key.slice(2), e => console.log(e.type));
      }
  }
}
bindAllEvents($('.yourElement'))

এটি প্রাকৃতিকতার জন্য কিছুটা ES6 ব্যবহার করে তবে লিগ্যাসি ব্রাউজারগুলির জন্য খুব সহজেই অনুবাদ করা যায়। ইভেন্ট শ্রোতাদের সাথে সংযুক্ত ফাংশনে, এটি বর্তমানে কেবল কী ধরণের ঘটনা ঘটেছে তা লগ আউট করে তবে এখানে আপনি অতিরিক্ত তথ্য মুদ্রণ করতে পারবেন, বা এর উপর একটি স্যুইচ কেস ব্যবহার করে e.typeআপনি কেবল নির্দিষ্ট ইভেন্টের তথ্য মুদ্রণ করতে পারবেন

Question 13

আপনার কোড সহ এবং মনিটরেভেস্টস () ব্যবহার না করে কনসোলে ইভেন্টগুলি নিরীক্ষণের জন্য এখানে একটি অ-জিকুরি উপায় রয়েছে কারণ এটি কেবলমাত্র ক্রোম বিকাশকারী কনসোলে কাজ করে। আপনি no_watch অ্যারে সম্পাদনা করে নির্দিষ্ট ইভেন্টগুলি নিরীক্ষণ না করতেও বেছে নিতে পারেন।

    function getEvents(obj) {
    window["events_list"] = [];
    var no_watch = ['mouse', 'pointer']; // Array of event types not to watch
    var no_watch_reg = new RegExp(no_watch.join("|"));

    for (var prop in obj) {
        if (prop.indexOf("on") === 0) {
            prop = prop.substring(2); // remove "on" from beginning
            if (!prop.match(no_watch_reg)) {
                window["events_list"].push(prop);
                window.addEventListener(prop, function() {
                    console.log(this.event); // Display fired event in console
                } , false);
            }
        }
    }
    window["events_list"].sort(); // Alphabetical order 

}

getEvents(document); // Put window, document or any html element here
console.log(events_list); // List every event on element

আপনি jQuery এর কোনও উপাদান দ্বারা চালিত সমস্ত ইভেন্টগুলিকে কীভাবে লগ করবেন?

পদক্ষেপ 1: এটির eventsজন্য পরীক্ষা HTML elementকরুন developer console:

পদক্ষেপ 2: eventsআমরা ক্যাপচার করতে চাই তা শুনুন :

পদক্ষেপ 1: এটির `events`জন্য পরীক্ষা `HTML element`করুন `developer console`:

পদক্ষেপ 2: `events`আমরা ক্যাপচার করতে চাই তা শুনুন :