जावास्क्रिप्ट में घटना को कैसे ट्रिगर करें?

Question

मैंने एक ईवेंट को टेक्स्ट बॉक्स का उपयोग करके संलग्न किया है addEventListener। यह बढ़िया काम करता है। मेरी समस्या तब पैदा हुई जब मैं कार्यक्रम को किसी अन्य फ़ंक्शन से प्रोग्राम को ट्रिगर करना चाहता था।

मैं यह कैसे कर सकता हूं?

Comments

मोज़िला के पास जावास्क्रिप्ट में घटनाओं को बनाने और ट्रिगर करने के बारे में समझाने वाला एक बहुत अच्छा लेख है । आशा है ये मदद करेगा!

— रिकी स्टैम

कृपया करने के लिए स्वीकार किए जाते हैं उत्तर को बदल यह , यह अधिक अप-टू-डेट है।

— माइकल पेरोलाकोव्स्की

@RickyStam ऐसा लगता है कि एमडीएन लेख यहां स्थानांतरित हुआ

— स्टाइल डे

Answer 1

आप उपयोग कर सकते हैं fireEvent पर आईई 8 W3C के या निचले हिस्से, और dispatchEvent पर सबसे अन्य ब्राउज़रों। उस घटना को बनाने के लिए जिसे आप फायर करना चाहते हैं, आप ब्राउज़र पर निर्भर करते हुए createEventया तो उपयोग कर सकते हैं createEventObject।

यहाँ कोड का एक आत्म-व्याख्यात्मक टुकड़ा (प्रोटोटाइप से) है जो एक घटना dataavailableको आग लगाता है element:

var event; // The custom event that will be created
if(document.createEvent){
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
    event.eventName = "dataavailable";
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventName = "dataavailable";
    event.eventType = "dataavailable";
    element.fireEvent("on" + event.eventType, event);
}

Comments

यह मत भूलिए कि केवल IE संस्करण में 'ऑन' सामने है (मुझे याद है कि पहली बार में)

— hugomg

चर eventNameयहाँ क्या है ?

— नेवार्क

हां dataavailable घटना में होना चाहिए और मेमो को भी परिभाषित किया जाना चाहिए ({} ठीक है परिभाषित करें)।

— चार्ल्स

Internet Explorer 9+ हैंडल createEvent और डिस्पैच करता है, इसलिए यदि स्टेटमेंट्स की कोई आवश्यकता नहीं है।

— ब्लेक

यह उदाहरण भी काम नहीं करता है, मेरा उत्तर देखें: stackoverflow.com/a/20548330/407213

— डोरियन

Answer 2

एक कार्य उदाहरण:

// Add an event listener
document.addEventListener("name-of-event", function(e) {
  console.log(e.detail); // Prints "Example of an event"
});

// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

पुराने ब्राउज़र पॉलीफ़िल और अधिक जटिल उदाहरणों के लिए, MDN डॉक्स देखें ।

EventTarget.dispatchEventऔर के लिए समर्थन तालिकाएँ देखें CustomEvent।

Comments

यह उत्तर अब अधिक वास्तविक है। जोड़ने के लिए एक बात: यदि कोई पता-टाइप की गई घटना (जैसे ट्रांज़िशनएवेंट , क्लिपबोर्डएवेंट , आदि) होनी चाहिए , तो उपयुक्त कंस्ट्रक्टर को बुलाया जा सकता है।

— किरिल

@AngelPolitis: क्योंकि यह पहले से ही स्वीकृत होने के बाद लिखा गया था और प्रश्न लिखने वाले व्यक्ति (@KoolKabin) ने शायद उत्तर को दोबारा नहीं पढ़ा

— डोरियन

और क्योंकि यह 2010 में पूछा गया था

— डार्कनॉर्टन

IE के किसी भी संस्करण के साथ काम नहीं करेगा ( caniuse.com/#feat=customevent )। तय करने के लिए मेरा जवाब देखें ।

— यारिन

भविष्य के पाठकों के लिए ध्यान दें, detailकी एक संपत्ति है Event, इसलिए किसी भी डेटा को आप दूसरे छोर पर पहुंचाना चाहते हैं और उसके द्वारा एक्सेस करना चाहते हैं event.detail। +1

— डाका

Answer 3

यदि आप jQuery का उपयोग नहीं करना चाहते हैं और विशेष रूप से पश्चगामी संगतता के बारे में चिंतित नहीं हैं, तो बस उपयोग करें:

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

यहां और यहां दस्तावेज देखें ।

संपादित करें: अपने सेटअप के आधार पर आप जोड़ना चाह सकते हैं bubbles: true:

let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));

Comments

यह स्वीकृत उत्तर होना चाहिए क्योंकि यह initEvent ()

— user2912903

अच्छा समाधान है, लेकिन यह आईई 11 पर काम नहीं करेगा जागरूक रहें। आपको तब CustomEventऔर पॉलीफ़िल के अनुसार उपयोग करना चाहिए ।

— फाबियन वॉन एलर्ट्स

चयनित उत्तर से बेहतर है

— साक्षी

Answer 4

यदि आप jQuery का उपयोग करते हैं, तो आप सरल कर सकते हैं

$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);

और इसके साथ संभाल

$('#yourElement').on('customEventName',
   function (objectEvent, [arg0, arg1, ..., argN]){
       alert ("customEventName");
});

जहाँ "[arg0, arg1, ..., argN]" का अर्थ है कि ये args वैकल्पिक हैं।

Comments

सही वाक्यविन्यास $ ('# आपका' ') है। ट्रिगर (' customEventName ', [arg0, arg1, ..., argN]); आप [] दूसरा पैरामीटर पर भूल गए हैं

— हैरी

Answer 5

यदि आप IE9 + का समर्थन कर रहे हैं, तो आप निम्नलिखित का उपयोग कर सकते हैं। एक ही अवधारणा को आप में शामिल किया जा सकता है jQuery की आवश्यकता नहीं है ।

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function() {
      handler.call(el);
    });
  }
}

function triggerEvent(el, eventName, options) {
  var event;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, options);
  } else {
    event = document.createEvent('CustomEvent');
    event.initCustomEvent(eventName, true, true, options);
  }
  el.dispatchEvent(event);
}

// Add an event listener.
addEventListener(document, 'customChangeEvent', function(e) {
  document.body.innerHTML = e.detail;
});

// Trigger the event.
triggerEvent(document, 'customChangeEvent', {
  detail: 'Display on trigger...'
});

---

आप पहले से ही jQuery का उपयोग कर रहे हैं, तो यहाँ से ऊपर कोड की jQuery संस्करण है।

$(function() {
  // Add an event listener.
  $(document).on('customChangeEvent', function(e, opts) {
    $('body').html(opts.detail);
  });

  // Trigger the event.
  $(document).trigger('customChangeEvent', {
    detail: 'Display on trigger...'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Comments

यह IE के किसी भी संस्करण के लिए काम नहीं करेगा, क्योंकि window.CustomEventयह मौजूद है, लेकिन इसे एक निर्माता के रूप में नहीं बुलाया जा सकता है: caniuse.com/#search=CustomEvent ;)

— SidOfc

Answer 6

मैंने जावास्क्रिप्ट का उपयोग करके माउसओवर पर फायरिंग क्लिक, मूसडाउन और माउसअप इवेंट की खोज की। मुझे जुआन मेंडेस द्वारा प्रदान किया गया उत्तर मिला । जवाब के लिए यहां क्लिक करें ।

यहाँ क्लिक करें लाइव डेमो है और नीचे कोड है:

function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9) {
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

    if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
        case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
        case "mousedown":
        case "mouseup":
            eventClass = "MouseEvents";
            break;

        case "focus":
        case "change":
        case "blur":
        case "select":
            eventClass = "HTMLEvents";
            break;

        default:
            throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
            break;
        }
        var event = doc.createEvent(eventClass);

        var bubbles = eventName == "change" ? false : true;
        event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else if (node.fireEvent) {
        // IE-old school style
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Answer 7

बस एक विकल्प का सुझाव देने के लिए जो एक श्रोता घटना को मैन्युअल रूप से लागू करने की आवश्यकता को शामिल नहीं करता है:

आपका ईवेंट श्रोता जो भी करता है, उसे एक फ़ंक्शन में स्थानांतरित करें और उस फ़ंक्शन को ईवेंट श्रोता से कॉल करें।

फिर, आप उस फ़ंक्शन को कहीं और भी कॉल कर सकते हैं जिसे आपको उसी चीज़ को पूरा करने की आवश्यकता है जो घटना तब होती है जब यह आग लग जाती है।

मुझे यह कम "कोड गहन" लगता है और पढ़ने में आसान है।

Comments

क्या होगा यदि आप संदर्भ के आधार पर एक ही घटना (या आपके मामले में अच्छी तरह से, कॉलबैक फ़ंक्शन) के लिए कई अलग-अलग चीजें करना चाहते हैं? :) यह एक अच्छा विकल्प है, लेकिन यह एक उत्तर की तुलना में एक टिप्पणी की तरह अधिक महसूस करता है क्योंकि ओपी यह जानना चाहता है कि कैसे कॉलबैक का उपयोग करने के विपरीत एक कार्यक्रम को ट्रिगर किया जाए :)

— SidOfc

आप काफी सही हैं कि यह एक जवाब के बजाय एक टिप्पणी होनी चाहिए थी। क्यों? क्योंकि, उम्म, ठीक है, .... यह उस सवाल का जवाब नहीं देता है जो वास्तव में पूछा गया था। अच्छा निर्णय। अपने स्वयं के प्रश्न के रूप में, मैं कहता हूं कि यह जावास्क्रिप्ट में निर्माणकर्ताओं के लिए एक महान अवसर होगा! ;-) लेकिन उनके बिना, मैं कहूंगा, अपने फ़ंक्शन कॉल के साथ एक तर्क भेजें और यह निर्धारित करने के लिए उपयोग किया जाए कि फ़ंक्शन क्या करना चाहिए।

— किर्बी एल वालेस

Answer 8

मैंने बस निम्नलिखित का उपयोग किया है (बहुत सरल प्रतीत होता है):

element.blur();
element.focus();

इस मामले में घटना तभी शुरू होती है जब मूल्य वास्तव में बदल दिया गया था जैसा कि आप इसे उपयोगकर्ता द्वारा किए गए सामान्य फोकस लोकस द्वारा ट्रिगर करेंगे।

Comments

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

— मर्दोक २५'१६

यह भी लागू होता है element.click()।

— एक्सफेक्ट

इसने एंड्रॉइड में मेरे एंगुलर / कॉर्डोवा ऐप के लिए एक अजीब मुद्दा तय किया, जहां टेक्सारिया खुद को साफ करने से इनकार कर देगा। तो धन्यवाद।

— डार्कनॉर्टन

Answer 9

IE के साथ काम करने के लिए संशोधित @ डोरियन का जवाब :

document.addEventListener("my_event", function(e) {
  console.log(e.detail);
});

var detail = 'Event fired';

try {

    // For modern browsers except IE:
    var event = new CustomEvent('my_event', {detail:detail});

} catch(err) {

  // If IE 11 (or 10 or 9...?) do it this way:

    // Create the event.
    var event = document.createEvent('Event');
    // Define that the event name is 'build'.
    event.initEvent('my_event', true, true);
    event.detail = detail;

}

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

FIDDLE: https://jsfiddle.net/z6zom9d0/1/

यह भी देखें:
https://caniuse.com/#feat=customevent

Answer 10

स्वीकृत जवाब मेरे लिए काम नहीं करता था, कोई भी सृजन नहीं करता था।

अंत में मेरे लिए क्या काम किया गया था:

targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));

यहाँ एक स्निपेट है:

const clickBtn = document.querySelector('.clickme');
const viaBtn = document.querySelector('.viame');

viaBtn.addEventListener('click', function(event) {
    clickBtn.dispatchEvent(
        new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window,
    }));
});

clickBtn.addEventListener('click', function(event) {
    console.warn(`I was accessed via the other button! A ${event.type} occurred!`);
});

<button class="clickme">Click me</button>

<button class="viame">Via me</button>

पढ़ने से: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Answer 11

function fireMouseEvent(obj, evtName) {
    if (obj.dispatchEvent) {
        //var event = new Event(evtName);
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(evtName, true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
        obj.dispatchEvent(event);
    } else if (obj.fireEvent) {
        event = document.createEventObject();
        event.button = 1;
        obj.fireEvent("on" + evtName, event);
        obj.fireEvent(evtName);
    } else {
        obj[evtName]();
    }
}

var obj = document.getElementById("......");
fireMouseEvent(obj, "click");

Comments

यह पदावनत है। केवल पॉलीफिल के लिए उपयोगी है। developer.mozilla.org/en-US/docs/Web/API/MouseEvent/...

— hipkiss

Answer 12

आप एक साथ संकलित इस फ़ंक्शन का उपयोग कर सकते हैं।

if (!Element.prototype.trigger)
  {
    Element.prototype.trigger = function(event)
    {
        var ev;

        try
        {
            if (this.dispatchEvent && CustomEvent)
            {
                ev = new CustomEvent(event, {detail : event + ' fired!'});
                this.dispatchEvent(ev);
            }
            else
            {
                throw "CustomEvent Not supported";
            }
        }
        catch(e)
        {
            if (document.createEvent)
            {
                ev = document.createEvent('HTMLEvents');
                ev.initEvent(event, true, true);

                this.dispatchEvent(event);
            }
            else
            {
                ev = document.createEventObject();
                ev.eventType = event;
                this.fireEvent('on'+event.eventType, event);
            }
        }
    }
  }

नीचे एक घटना ट्रिगर:

var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');

घटना देखें:

dest.addEventListener('focus', function(e){
   console.log(e);
});

उम्मीद है की यह मदद करेगा!

Answer 13

आप एलीमेंट विधि का उपयोग करके कोड से नीचे फायर इवेंट में उपयोग कर सकते हैं:

if (!Element.prototype.triggerEvent) {
    Element.prototype.triggerEvent = function (eventName) {
        var event;

        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
        } else {
            event = document.createEventObject();
            event.eventType = eventName;
        }

        event.eventName = eventName;

        if (document.createEvent) {
            this.dispatchEvent(event);
        } else {
            this.fireEvent("on" + event.eventType, event);
        }
    };
}

if (!Element.prototype.triggerEvent) {
    Element.prototype.triggerEvent = function (eventName) {
        var event;

        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
        } else {
            event = document.createEventObject();
            event.eventType = eventName;
        }

        event.eventName = eventName;

        if (document.createEvent) {
            this.dispatchEvent(event);
        } else {
            this.fireEvent("on" + event.eventType, event);
        }
    };
}

var input = document.getElementById("my_input");
var button = document.getElementById("my_button");

input.addEventListener('change', function (e) {
    alert('change event fired');
});
button.addEventListener('click', function (e) {
    input.value = "Bye World";
    input.triggerEvent("change");
});

<input id="my_input" type="input" value="Hellow World">
<button id="my_button">Change Input</button>

Answer 14

सबसे कुशल तरीका उसी फ़ंक्शन को कॉल करना है जिसे पंजीकृत किया गया है addEventListener सीधे ।

आप एक फर्जी घटना को भी ट्रिगर कर सकते हैं CustomEvent सह सकते हैं।

अंत में कुछ तत्व जैसे कि <input type="file">एक .click()विधि का समर्थन करते हैं ।

Answer 15

var btn = document.getElementById('btn-test');
var event = new Event(null);

event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);

यह एक घटना को पहले 'आइंस्टीनोप्रोम्प्ट' के रूप में कार्यान्वित करेगा

Answer 16

Jquery ईवेंट कॉल का उपयोग करें। नीचे की लाइन लिखें जहां आप किसी भी तत्व के ऑनग्राउंड को ट्रिगर करना चाहते हैं।

$("#element_id").change();

element_id उस एलिमेंट की आईडी है, जिसके ऑनग्राउंड को आप ट्रिगर करना चाहते हैं।

के उपयोग से बचें

 element.fireEvent("onchange");

क्योंकि इसमें बहुत कम सपोर्ट है। इस दस्तावेज़ को इसके समर्थन के लिए देखें ।

Answer 17

एचटीएमएल

<a href="demoLink" id="myLink"> myLink </a>
<button onclick="fireLink(event)"> Call My Link </button>

जे एस

// click event listener of the link element --------------  
document.getElementById('myLink').addEventListener("click", callLink);
function callLink(e) {
    // code to fire
}

// function invoked by the button element ----------------
function fireLink(event) {                   
    document.getElementById('myLink').click();      // script calls the "click" event of the link element 
}

Answer 18

आप जो चाहते हैं वह कुछ इस तरह है:

document.getElementByClassName("example").click();

JQuery का उपयोग करना, यह कुछ इस तरह होगा:

$(".example").trigger("click");

Comments

ट्रिगर विधि गलत नहीं है, लेकिन यह एक jquery विधि है

— कामुरेन सोंसेक

1. document.getElementByClassNameमौजूद नहीं है। 2. document.getElementsByClassNameमौजूद है, लेकिन एक सूची देता है। 3. यह केवल कुछ चुनिंदा मूल घटनाओं के लिए काम करता है। 4. अंतिम उदाहरण एक jQuery घटना को ट्रिगर करता है जहां कोई अंतर्निहित मूल घटना मौजूद नहीं है।

— ग्लेन जोर्डे