কীভাবে জাভাস্ক্রিপ্টে ইভেন্টটি ট্রিগার করবেন?

Question

আমি একটি পাঠ্য বাক্স ব্যবহার করে একটি ইভেন্ট সংযুক্ত করেছি addEventListener। এটা ঠিক কাজ করে। আমার সমস্যাটি তখনই উদ্ভূত হয়েছিল যখন আমি ইভেন্টটি প্রোগ্রাম থেকে অন্য ফাংশন থেকে ট্রিগার করতে চেয়েছিলাম।

আমি এটা কিভাবে করবো?

Comments

মোজিলা জাভাস্ক্রিপ্টে ইভেন্টগুলি তৈরি এবং ট্রিগার ব্যাখ্যা করার জন্য একটি খুব সুন্দর নিবন্ধ আছে । আশা করি এটা সাহায্য করবে!

— রিকি স্ট্যাম

দয়া করে গৃহীত উত্তর পরিবর্তন এই , এটা আরো বেশি আপ-টু-ডেট আছে।

— মিশা পেরেকোভস্কি

@ রিকিস্ট্যাম দেখে মনে হচ্ছে এমডিএন নিবন্ধটি এখানে স্থানান্তরিত হয়েছে

— স্টাইলফ্লে

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

ভুলে যাবেন না যে কেবল আইই সংস্করণটির সামনে 'অন' রয়েছে (আমি প্রথমটি এটি মিস করেছি)

— hugomg

ভেরিয়েবল eventNameএখানে কী ধারণ করে?

— নেদার্ক

হ্যাঁ উপাত্ত উপলভ্য ইভেন্ট ইভেন্টের মধ্যে থাকা উচিত এবং মেমোটি খুব সংজ্ঞায়িত করা উচিত (def} ঠিক আছে সংজ্ঞায়িত করুন)।

— চার্লস

ইন্টারনেট এক্সপ্লোরার 9+ ক্রিয়েভেন্ট এবং ডিসপ্যাচইভেন্ট পরিচালনা করে, সুতরাং যদি বিবৃতি দেওয়া হয় তবে তাদের প্রয়োজন নেই।

— ব্লেক

এই উদাহরণটি এমনকি কাজ করে না, আমার উত্তর দেখুন: 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

এই উত্তর এখন আরও প্রকৃত। একটি জিনিস যোগ করতে হবে: যদি কোনও জ্ঞাত-টাইপ ইভেন্ট থাকতে পারে (যেমন ট্রানজিশনসেন্ট , ক্লিপবোর্ড এভেন্ট ইত্যাদি) উপযুক্ত কনস্ট্রাক্টর বলা যেতে পারে।

— কিরিল

@ অ্যাঞ্জেলপোলাইটিস: কারণ এটি পূর্ববর্তীটি ইতিমধ্যে গৃহীত হওয়ার পরে লেখা হয়েছিল এবং যে ব্যক্তি প্রশ্নটি লিখেছেন (@ কুলকবিন) সম্ভবত সেগুলির উত্তরগুলি পুনরায় পড়েনি

— ডোরিয়ান

এবং কারণ এটি 2010 সালে জিজ্ঞাসা করা হয়েছিল

— ডার্কনিউরন

আইই এর কোনও সংস্করণ ( 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

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এটি অবাকৃত পদ্ধতিগুলি যেমন ইনিভেভেন্ট ()

— ব্যবহারকারীর জন্য

দুর্দান্ত সমাধান, তবে সচেতন থাকুন এটি IE11 এ কাজ করবে না। তারপরে আপনার ব্যবহার করা উচিত CustomEventএবং সেই অনুযায়ী পলিফিল ব্যবহার করা উচিত ।

— ফ্যাবিয়ান ভন এলার্টস

নির্বাচিত উত্তরের চেয়ে ভাল

— WITTRuth

Answer 4

আপনি jQuery ব্যবহার করেন, আপনি সহজ করতে পারেন

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

এবং এটি দিয়ে পরিচালনা করুন

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

যেখানে "[arg0, arg1, ..., argN]" এর অর্থ এই অর্গগুলি alচ্ছিক।

Comments

সঠিক বাক্য গঠনটি হ'ল '(' # আপনার এলিমেট ') trigger আপনি দ্বিতীয় প্যারামিটারে []] ভুলে গেছেন

— হ্যারি

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

এটি আইই এর কোনও সংস্করণের জন্য কাজ করবে না, যেমন একটি window.CustomEventবিদ্যমান আছে তবে এটি নির্মাতা হিসাবে বলা যায় না: caniuse.com/#search=CustomEvent ;)

— সিডঅফসি

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

আপনি যদি প্রসঙ্গের ভিত্তিতে একই ইভেন্টের (বা ভাল, আপনার ক্ষেত্রে কলব্যাক ফাংশন) জন্য একাধিক বিভিন্ন জিনিস করতে চান তবে কী হবে? :) এটি একটি ভাল বিকল্প তবে এটি কোনও উত্তর চেয়ে কমেন্টের মতোই অনুভূত হয়েছে কারণ ওপি জানতে পারে যে কীভাবে প্রোগ্রামটি কোনও কলব্যাক ব্যবহারের বিপরীতে কোনও ইভেন্টটি ট্রিগার করতে পারে :)

— সিডোএফসি

আপনি বেশ সঠিক যে এটি একটি উত্তর চেয়ে মন্তব্য করা উচিত ছিল। কেন? কারণ, আহ, ভাল, .... এটি আসলে জিজ্ঞাসা করা প্রশ্নের উত্তর দেয় না। ভাল কল. আপনার নিজের প্রশ্ন হিসাবে, আমি বলব এটি জাভাস্ক্রিপ্টে নির্মাণকারীদের জন্য একটি দুর্দান্ত সুযোগ হবে! ;-) তবে সেগুলি ছাড়াই আমি বলব, আপনার ফাংশন কলের সাথে একটি যুক্তি প্রেরণ করুন এবং এটি ফাংশনটি কী করা উচিত তা নির্ধারণের জন্য ব্যবহার করা যাক।

— এল। ওয়ালেস

Answer 8

আমি কেবল নিম্নলিখিতটি ব্যবহার করেছি (অনেক সহজ বলে মনে হচ্ছে):

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

এই ক্ষেত্রে ইভেন্টটি কেবল তখনই ট্রিগার করা হয় যখন মানটি সত্যই পরিবর্তিত হয় যেমন আপনি এটি ব্যবহারকারীর দ্বারা সম্পাদিত সাধারণ ফোকাস লোকস দ্বারা ট্রিগার করবেন।

Comments

এটি কী ধরণের ঘটনা তা বিবেচনায় নেই। অস্পষ্টতা এবং ফোকাসিং ইভেন্টটি ট্রিগার করতে পারে তবে তা পাশাপাশি নাও হতে পারে। এটি বাগগুলি আমন্ত্রণ জানাচ্ছে।

— মার্ডোক

এটিও প্রযোজ্য element.click()।

— এক্সিএফেক্ট

এটি অ্যান্ড্রয়েডে আমার কৌণিক / কর্ডোভা অ্যাপ্লিকেশনটির জন্য একটি অদ্ভুত সমস্যা সমাধান করেছে, যেখানে টেক্সারিয়া নিজেকে পরিষ্কার করতে অস্বীকার করবে। সূতরাং ধন্যবাদ.

— ডার্কনিউরন

Answer 9

আইইয়ের সাথে কাজ করার জন্য @ ডরিয়ানের উত্তর পরিবর্তিত হয়েছে :

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/

এছাড়াও দেখুন: https://caniuse.com/#feat=customevent vent

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/ মাউস এভেন্ট

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

এটি অবচয় করা হয়েছে। পলিফিলের জন্য কেবল কার্যকর। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

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.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

ট্রিগার পদ্ধতিটি ভুল নয়, তবে এটি একটি

— জেকারি

1. document.getElementByClassNameবিদ্যমান নেই। 2. document.getElementsByClassNameবিদ্যমান কিন্তু একটি তালিকা ফেরত। ৩. এটি কেবল কয়েকটি কয়েকটি স্থানীয় ইভেন্টের জন্য কাজ করে। ৪. সর্বশেষ উদাহরণটি jQuery ইভেন্টকে ট্রিগার করে যেখানে কোনও অন্তর্নিহিত নেটিভ ইভেন্টের উপস্থিতি নেই।

— গ্লেন জর্ডে