2012-01-09 17 views
14

"ऑनचेंज" ईवेंट तभी ट्रिगर होता है जब उपयोगकर्ता कुछ मूल्य में प्रवेश करता है। जब मैं जावास्क्रिप्ट के माध्यम से स्वचालित रूप से मूल्य बदलता हूं तो ईवेंट को आग लगाना क्यों संभव नहीं है? क्या कोई विकल्प है?ट्रिगर "ऑनचेंज" ईवेंट

एनिमेशन:

enter image description here

कोड:

<!DOCTYPE html> 

<html> 
    <head> 
     <script> 
      document.addEventListener ("DOMContentLoaded", function() { 
       var input = this.getElementsByTagName ("input")[0]; 
       var div = this.getElementsByTagName ("div")[0]; 
       var i = 0; 
       var seconds = 5; 

       div.innerHTML = "The following input should fire the event in " + seconds + " seconds"; 

       var interval = window.setInterval (function() { 
        i ++; 

        if (i === seconds) { 
         window.clearInterval (interval); 

         input.value = "Another example"; 

         div.innerHTML = "Nothing ! Now try change the value manually"; 
        } 
        else { 
         div.innerHTML = "The following input should fire the event in " + (seconds - i) + " seconds"; 
        } 
       }, 1000); 

       input.addEventListener ("change", function() { 
        alert ("It works !"); 
       }, false); 
      }, false); 
     </script> 

     <style> 
      body { 
       padding: 10px; 
      } 

      div { 
       font-weight: bold; 
       margin-bottom: 10px; 
      } 

      input { 
       border: 1px solid black; 
       border-radius: 3px; 
       padding: 3px; 
      } 
     </style> 

     <title>Event</title> 
    </head> 

    <body> 
     <div></div> 
     <input type = "text" value = "Example" /> 
    </body> 
</html> 

धन्यवाद

+0

आपको मूल्य बदलने के बाद मैन्युअल रूप से ईवेंट को आग लगाना होगा। यह प्रश्न देखें: http://stackoverflow.com/q/2490825/615754 – nnnnnn

+0

जब आप जावास्क्रिप्ट के साथ इनपुट मान बदलते हैं तो कुछ घटनाओं को फायर क्यों नहीं करते? आप विनिमय का उपयोग क्यों करना चाहते हैं? आदान-प्रदान उपयोगकर्ता इनपुट के लिए बाकी है जिसे आप स्वयं के बिना संभाल सकते हैं। – ggzone

उत्तर

18

समय के विशाल बहुमत के लिए, आप एक गतिविधि सक्रिय की नहीं करना चाहते जब आप कोड के साथ मान बदलते हैं। उन मामलों में जहां आप करते हैं, आप dispatchEvent के माध्यम से आधुनिक ब्राउज़रों पर सिंथेटिक ईवेंट को आग लगा सकते हैं। More here

input.value = "Another example"; 
var event = document.createEvent("UIEvents"); // See update below 
event.initUIEvent("change", true, true);  // See update below 
input.dispatchEvent(event); 

Live demo

अपडेट::Benjamin noted, के बाद से ऊपर लिखा गया था के रूप में, initUIEvent, UIEventनिर्माता के साथ बदल दिया गया है, ताकि होगा

अपने विशिष्ट उदाहरण में

तो :

input.value = "Another example"; 
var event = new UIEvent("change", { 
    "view": window, 
    "bubbles": true, 
    "cancelable": true 
}); 
input.dispatchEvent(event); 

Live demo

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

+0

मैं आपके अपडेट किए गए उत्तर का उपयोग कर रहा हूं और यह एक आकर्षण की तरह काम करता है, लेकिन यह मेरे ऐप को बहुत धीमा कर देता है, जब jquery के ट्रिगर() के साथ किया जाता है, वही क्रिया होती है। क्या कारण हो सकता है? और मैं प्रदर्शन में सुधार कैसे कर सकता हूं? – Abhinav

1

यदि आप मूल्य को व्यावहारिक रूप से बदल रहे हैं, तो आप पहले से ही जानते हैं कि यह कब होता है, क्या कहना है कि आप अपनी विधि को कॉल नहीं कर सकते हैं, (वही संभवतः वास्तविक ट्रिगर ईवेंट हैंडलर से कहा जाता है) जब आप मूल्य बदलते हैं ?

संपादित करें: अन्यथा, यदि आपको विशेष रूप से होने वाली वास्तविक आग की आवश्यकता है, तो आप स्वयं भी ईवेंट को मैन्युअल रूप से प्रेषित कर सकते हैं।

+0

यह चित्र: आपके पास 5 इनपुट अपडेट करने वाला 1 फ़ंक्शन है, प्रत्येक इनपुट को बदलते समय एक अलग फ़ंक्शन कॉल करना होता है, सबकुछ गतिशील होता है, इसलिए आपको आईडी और अन्य चीज़ों को नहीं पता होगा .. सबसे अच्छा तरीका प्रत्येक में एक परिवर्तन श्रोता जोड़ रहा है इनपुट जो इसे आवश्यक फ़ंक्शन को कॉल करता है, – bakz

1

क्रॉउडर के कोड ने मुझे केवल टाइप एरर दिया (UIEvent.initUIEvent के लिए पर्याप्त तर्क नहीं)। इस के लिए यह परिवर्तन:

input.value = "Another example"; 
var event = document.createEvent("UIEvents"); 
event.initUIEvent("change", true, true, window, 1); 
input.dispatchEvent(event); 

और यह काम करता है।

+0

ध्यान दें कि 'initUIEvent' को वेब मानकों से हटा दिया गया है और हटा दिया गया है: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent –

4

ध्यान दें कि initUIEvent पदावनत किया गया है और कहा गया है वेब मानक से हटा: developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent

इस को छोड़कर ऐसा नहीं है कि एक ही है ' टी initUIEvent का उपयोग करें:

input.value = 'Another example'; 
var event = new UIEvent('change', { 
    'view': window, 
    'bubbles': true, 
    'cancelable': true 
}); 
input.dispatchEvent(event); 
संबंधित मुद्दे