आप 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 द्वारा तत्व से बंधी हुई है जिस क्षण यह विशिष्ट घटना निकाल दी जाती है। यह कोड कई बार मेरे लिए मददगार था।

Btw: यदि आप हर संभव ईवेंट को फायरबग ऑब्जेक्ट का उपयोग करके निकालते देखना चाहते हैं: html टैब में DOM तत्व पर राइट क्लिक करें और "लॉग इवेंट्स" चेक करें। प्रत्येक घटना तब कंसोल में लॉग हो जाती है (यह कभी-कभी थोड़ा कष्टप्रद होता है क्योंकि यह हर माउस आंदोलन को लॉग करता है ...)।

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

पुराना धागा, मुझे पता है। मुझे घटनाओं पर नज़र रखने के लिए भी कुछ चाहिए था और यह बहुत आसान (उत्कृष्ट) समाधान लिखा था। आप इस हुक के साथ सभी घटनाओं की निगरानी कर सकते हैं (विंडोज़ प्रोग्रामिंग में इसे हुक कहा जाता है)। यह हुक आपके सॉफ़्टवेयर / प्रोग्राम के संचालन को प्रभावित नहीं करता है।

में कंसोल लॉग इन करें आप कुछ इस तरह देख सकते हैं:

आप जो देखते हैं उसका स्पष्टीकरण:

कंसोल लॉग में आपको आपके द्वारा चुने गए सभी ईवेंट दिखाई देंगे (नीचे "कैसे उपयोग करें" ) और ऑब्जेक्ट-प्रकार, classname (s), आईडी, <: फ़ंक्शन का नाम>, <: eventname> दिखाता है। वस्तुओं का स्वरूपण सीएसएस-जैसा है।

जब आप एक बटन या किसी भी बंधी हुई घटना पर क्लिक करते हैं, तो आप इसे कंसोल लॉग में देखेंगे।

कोड मैंने लिखा है:

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 elementdeveloper 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 elementdeveloper console

चरण 2: eventsहम कब्जा करना चाहते हैं सुनो :

चरण 1: इस पर निम्न के `events`लिए जाँच करें :`HTML elementdeveloper console`

चरण 2: `events`हम कब्जा करना चाहते हैं सुनो :