मैं प्रोग्रामेटिक रूप से एक इनपुट पर एक ऑनकॉन्ग इवेंट को कैसे मजबूर कर सकता हूं?

123

मैंने कुछ इस तरह की कोशिश की है:

var code = ele.getAttribute('onchange');
eval(code);

लेकिन मेरा अंतिम लक्ष्य किसी भी श्रोता के कार्यों को करना है, और यह काम नहीं करता है। न ही सिर्फ 'मूल्य' विशेषता को अद्यतन करता है।

javascript

— Soldarnal
स्रोत

142

एक Eventऑब्जेक्ट बनाएं और इसे dispatchEventतत्व की विधि में पास करें:

var element = document.getElementById('just_an_example');
var event = new Event('change');
element.dispatchEvent(event);

यह इवेंट श्रोताओं को इस बात की परवाह किए बिना होगा कि क्या वे addEventListenerविधि को कॉल करके या onchangeतत्व की संपत्ति सेट करके पंजीकृत थे ।

यदि आप ईवेंट को बबल चाहते हैं, तो आपको Eventकंस्ट्रक्टर को दूसरा तर्क देने की आवश्यकता है :

var event = new Event('change', { bubbles: true });

ब्राउज़र संगतता के बारे में जानकारी:

— बदमाश
स्रोत

2

हाँ, MDN बनाना और ट्रिगर करना एक अच्छा संसाधन है!

— जैकब होली

1

यह कैसे ठीक से, देशी तरीके से करना है। अब सभी ब्राउज़रों में समर्थित: caniuse.com/#feat=dispatchevent

— विलेम मुल्डर

1

यह इस प्रश्न का सही उत्तर है। हमें इसे आधुनिक तरीके से हासिल करना चाहिए।

— Константин Ван

1

IE IE11 पर बराबर करने की कोशिश कर रहा है, लेकिन जब कोई अभिक्रिया इनपुट क्षेत्र को बदलने की कोशिश कर रहा है तो यह काम नहीं कर रहा है।

var evt = document.createEvent('CustomEvent');     evt.initCustomEvent('input', true, false, { });     elem.dispatchEvent(evt);

— बोडोस्को

3

क्यों हर कोई कह रहा है कि यह सबसे अच्छा जवाब है? लिंक्ड इवेंट डॉक के अनुसार, IE का वर्तमान संस्करण अभी भी इसका समर्थन नहीं करता है।

— जेफ-एच

96

JQuery में मैं ज्यादातर उपयोग करता हूं:

$("#element").trigger("change");

— Danita
स्रोत

2

tihs मेरी मदद की! मैं कोड का उपयोग करके एक चेकबॉक्स (चेक किया गया या नहीं) के मूल्य को सेट कर रहा था और ईई में कोई फर्क नहीं पड़ता कि मैंने क्या किया था। मैंने ब्लर () फ़ोकस () और कुछ अन्य चीजों की कोशिश की। के बाद मैं मूल्य मैं ट्रिगर बुलाया सेट और मैं भी ट्रिगर करने के लिए कॉल करने के लिए एक क्लिक घटना को जोड़ा। यह कई आग का कारण बनता है, लेकिन यह मेरे लिए मायने नहीं रखता है। IE में मैं कोड के माध्यम से चेकबॉक्स जोड़ता हूं और आपको परिवर्तन घटना की आग से पहले दो बार उन पर क्लिक करना होगा। इस टिप के लिए धन्यवाद।

— डस्टिन डेविस

6

अद्यतन के रूप में, $ ("# तत्व")। परिवर्तन (); 1.0 के बाद से एक ही बात करता है।

— कुकियोऑफफोर्ट

3

ध्यान दें कि यह देशी ऑन्चेंज को ट्रिगर नहीं करता है। यह केवल उन सभी ऑनचेंज श्रोताओं को आग देगा जो jQuery के माध्यम से बंधे थे!

— विलेम मुल्डर

कृपया यहाँ कोई मदद? इन समाधानों में से कोई भी मेरे लिए काम नहीं करता है .. stackoverflow.com/questions/51216332/…

— गेब

61

यूजी किसी भी चीज के लिए eval का उपयोग नहीं करते हैं । खैर, कुछ चीजें हैं, लेकिन वे बेहद दुर्लभ हैं। बल्कि, आप ऐसा करेंगे:

document.getElementById("test").onchange()

अधिक विकल्पों के लिए यहाँ देखें: http://jehiah.cz/archive/firing-javascript-events-properly

— Kolten
स्रोत

3

JSON को ऑब्जेक्टिफाई करने के लिए eval;)

— हारून पॉवेल

3

JSON पर बल देने के लिए json2.js! JSON.parse पहले से ही आधुनिक ब्राउज़रों पर उपलब्ध है

— jinglesthula

12

यह तकनीक केवल तभी काम करती है जब परिवर्तन हैंडलर को "ऑन्चेंज" सेट करके संलग्न किया गया था। यह एक 'वास्तविक' घटना उत्पन्न नहीं करता है जो w3c या Microsoft इवेंट हैंडलर को ट्रिगर करता है। अधिक जानकारी के लिए लिंक देखें।

— स्टीफन नेल्सन

6

मुझे लगता है कि यह उत्तर अब पुराना है, Miscreant का उत्तर का उपयोग कर रहा है new Event(...)और dispatchEventआजकल इसका सही समाधान है, ऐसा लगता है।

— जकूब होली

4

इस उत्तर का पालन किया जाता है ; यदि आप Element.addEventListenerईवेंट को हैंडल करने के लिए उपयोग करते हैं तो ऊपर दिया गया कोड काम नहीं करेगा । इसे आधुनिक तरीके से प्राप्त करने के लिए, @ Miscreant का उत्तर देखें।

— Константин Ван

23

किसी कारण से ele.onchange () मेरे पेज पर IE में मेरे लिए एक "विधि नहीं मिली" अपवाद को फेंक रहा है, इसलिए मैंने इस फ़ंक्शन का उपयोग कोल्टन द्वारा दिए गए लिंक और फायरईवेंट (एल, 'परिवर्तन') को कॉल करते हुए किया, जिसने काम किया :

function fireEvent(element,event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

फिर भी, मैंने एक परीक्षण पृष्ठ बनाया, जिसमें पुष्टि की गई कि कॉल ऑनचेंज () काम करना चाहिए:

<input id="test1" name="test1" value="Hello" onchange="alert(this.value);"/>
<input type="button" onclick="document.getElementById('test1').onchange();" value="Say Hello"/>

संपादित करें: कारण ele.onchange () काम नहीं किया था क्योंकि मैं वास्तव में onchange घटना के लिए कुछ भी घोषित नहीं किया था। लेकिन आग अभी भी काम करती है।

— Soldarnal
स्रोत

2

मुझे ब्राउजर डिटेक्शन का यह तरीका (ऑब्जेक्ट डिटेक्शन द्वारा) मेरे द्वारा दिए गए उदाहरण से बेहतर लगता है।

— क्रिस मैकडोनाल्ड

यह फ़ायरफ़ॉक्स 23 के लिए अब और काम नहीं करता है: "element.dispatchEvent एक फ़ंक्शन नहीं है"

— ओलिवर

4

हाय साथी गोगलर्स। यह 2016 है! आजकल हम element.dispatchEvent(new Event('change', true, true))उस सभी आर्कन के बजाय कोड लिखते हैं और ज्यादातर पदावनत createEventऔर initEventसामान।

— एरिकोस्को

3

यह IE और क्रोम के लिए सबसे सही उत्तर है ::

javascript=>

var element = document.getElementById('xxxx');
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
element.dispatchEvent(evt);

— पीटर लो
स्रोत

2

क्वनिट के नीचे से लिया गया

function triggerEvent( elem, type, event ) {
    if ( $.browser.mozilla || $.browser.opera ) {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
            0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem.dispatchEvent( event );
    } else if ( $.browser.msie ) {
        elem.fireEvent("on"+type);
    }
}

आप निश्चित रूप से $ .browser सामान को अपने स्वयं के ब्राउज़र का पता लगाने के तरीकों से बदल सकते हैं, इसे jQuery के स्वतंत्र बनाने के लिए।

इस फ़ंक्शन का उपयोग करने के लिए:

var event;
triggerEvent(ele, "change", event);

यह मूल रूप से वास्तविक DOM घटना को आग देगा जैसे कि वास्तव में कुछ बदल गया था।

— क्रिस मैकडोनाल्ड
स्रोत

1

यदि आप इस कोड के स्निपेट के साथ अपने सभी कार्यक्रम जोड़ते हैं:

//put this somewhere in your JavaScript:
HTMLElement.prototype.addEvent = function(event, callback){
  if(!this.events)this.events = {};
  if(!this.events[event]){
    this.events[event] = [];
    var element = this;
    this['on'+event] = function(e){
      var events = element.events[event];
      for(var i=0;i<events.length;i++){
        events[i](e||event);
      }
    }
  }
  this.events[event].push(callback);
}
//use like this:
element.addEvent('change', function(e){...});

तब आप केवल अपने ईवेंट का नाम element.on<EVENTNAME>()कहां <EVENTNAME>है, का उपयोग कर सकते हैं और वह सभी ईवेंट को कॉल करेगा<EVENTNAME>

— वेंटिव सेन्ह
स्रोत

-2

जावास्क्रिप्ट में किसी भी घटना को ट्रिगर करने के लिए।

 document.getElementById("yourid").addEventListener("change", function({
    //your code here
})

— हरेश सेला
स्रोत

2

यह घटनाओं के लिए सुन रहा है, उन्हें ट्रिगर नहीं कर रहा है।

— invalidusername

-4

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

$('#elementId').change(function() { alert('Do Stuff'); });

या एमएस AJAX:

$addHandler($get('elementId'), 'change', function(){ alert('Do Stuff'); });

या तत्व के कच्चे HTML में:

<input type="text" onchange="alert('Do Stuff');" id="myElement" />

प्रश्न को फिर से पढ़ने के बाद मुझे लगता है कि मुझे याद है कि क्या किया जाना था। मुझे कभी भी DOM तत्व को अपडेट करने का तरीका नहीं मिला है जो एक परिवर्तन घटना को मजबूर करेगा, आप जो सबसे अच्छा कर रहे हैं वह एक अलग घटना हैंडलर विधि है, जैसे:

$addHandler($get('elementId'), 'change', elementChanged);
function elementChanged(){
  alert('Do Stuff!');
}
function editElement(){
  var el = $get('elementId');
  el.value = 'something new';
  elementChanged();
}

चूंकि आप पहले से ही एक जावास्क्रिप्ट विधि लिख रहे हैं, जो कॉलिंग को बदल देगी और यह कॉल करने के लिए केवल 1 अतिरिक्त लाइन होगी।

या, यदि आप Microsoft AJAX फ्रेमवर्क का उपयोग कर रहे हैं , तो आप सभी ईवेंट हैंडलर्स तक पहुँच सकते हैं:

$get('elementId')._events

यह आपको सही घटना हैंडलर (एस) को आग लगाने के लिए कुछ प्रतिबिंब-शैली के कामकाज करने की अनुमति देगा।

— हारून पॉवेल
स्रोत

1

मेरा मानना है कि वह वास्तविक घटना पर आग लगाना चाहता है, जब समारोह में आग लगने पर एक समारोह नहीं चलाया जाता है ... मुझे लगता है । lol

— कोल्टेन

-5

JQuery का उपयोग करके आप निम्नलिखित कार्य कर सकते हैं:

// for the element which uses ID
$("#id").trigger("change");

// for the element which uses class name
$(".class_name").trigger("change");

— स्टील की टोकरी
स्रोत

अपरिभाषित कोई फ़ंक्शन नहीं है।

— हिस्टो वेनेव