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




events javascript-events (8)

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

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


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

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

element_id उस तत्व की आईडी है जिस पर आप चालू करना चाहते हैं।

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

 element.fireEvent("onchange");

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


आईई के साथ काम करने के लिए @ डोरियन का answer संशोधित:

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

फ़ील्ड: https://jsfiddle.net/z6zom9d0/1/

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


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

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

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

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

एक कामकाजी उदाहरण:

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

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

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


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

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

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


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

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

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

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

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

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

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

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


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

आप CustomEvent और सह के साथ एक नकली घटना भी ट्रिगर कर सकते हैं।

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








addeventlistener