इवेंट श्रोताओं को कई तत्वों में जोड़ना

Question

मैं अब कुछ अच्छे घंटों के लिए संघर्ष कर रहा हूं।

मैं एक पृष्ठ पर सभी <select> रों को एक घटना श्रोता जोड़ना चाहते हैं और मैं कोड के इस टुकड़े मिल गया है अब तक:

onload = function(e) { 
    sels = document.getElementsByTagName('select'); 
    for(i=0; i<sels.length; i++) { 
     sels[i].addEventListener('change', alert('test!'), false); 
    } 
} 

यह केवल चेतावनी, जब पेज लोड और जब नहीं है चलाता है मैं अपने <select> एस में से किसी एक में मान बदलता हूं।

क्या मुझे सही दिशा में एक झुकाव मिल सकता है, कृपया? अब अपने कोड के अनुसार addEventListener की कोशिश करता undefined (alert() की वापसी के परिणाम को जोड़ने के लिए के लिए

... .addEventListener('change', function() { alert('test!')}, false ... 

: :-)

Answer 1

आप के रूप में आप तुरंत alert() समारोह आह्वान अपने उदाहरण में उस के लिए वहाँ गुमनाम समारोह की आवश्यकता है समारोह)।

या फिर आप पास कर सकते हैं कि के लिए समारोह हैंडलर:

function alertMe() { 
    alert('test!'); 
} 
... 

... .addEventListener('change', alertMe, false ... 

नोट: कि बनाने somefunction(arg[, arg...]) फोन आप कार्य करने के लिए नहीं संदर्भ, लेकिन क्या समारोह रिटर्न के द्वारा।

Answer 2

आप चेतावनी() फ़ंक्शन तुरंत क्रियान्वित कर रहे हैं, तो आप addEventListener समारोह के बजाय एक समारोह पारित करने के लिए है, तो जरूरत है: एक समारोह में alert लपेटकर, पहले उल्लेख किया है की तरह एक तरफ

onload = function(e) { 
    sels = document.getElementsByTagName('select'); 
    for(i=0; i<sels.length; i++) { 
     document.getElementsByTagName('select')[i].addEventListener('change', function() { alert('test!'); }, false); 
    } 
} 

Answer 3

, नहीं है पाश के हर यात्रा के लिए getElementsByTagName का उपयोग करें:

onload = function(e) { 
    sels = document.getElementsByTagName('select'); 
    for(i=0; i<sels.length; i++) { 
     sels[i].addEventListener('change', function(){alert('test!')}, false); 
    } 
} 

आप select तत्वों एक चर को बचाया की सूची है, यह आवश्यक नहीं है, get इन सभी को अक्षम उल्लेख करने के लिए नहीं तत्व, प्रत्येक पाश पुनरावृत्ति।

Answer 4

मैं निम्नलिखित सरल समारोह है, जो तत्वों कि selector से मेल खाने वाले सब कुछ खत्म हो iterates बनाया है, और पारित कर दिया handler साथ event के लिए एक घटना श्रोता जोड़ें।

इस के लिए इसी तरह की सुविधा है jQuery के $(selector).on(event, handler)

function addEventListeners(selector, event, handler, useCapture){ 

    useCapture = useCapture || false; 

    Array.prototype.forEach.call(
     document.querySelectorAll(selector) 
     ,function(el, ix) { 
      el.addEventListener(event, handler, useCapture); 
     } 
    ); 
} 

ओपी के लिए

तो जिस तरह से इस सुविधा का उपयोग करने के लिए इतना जैसा होगा:

addEventListeners("select", "change", function(evt){ console.log(evt); }); 

भी देखें Event listener for current and future elements

Answer 5

के लिए मेरा उत्तर इवेंट बबलिंग जावास्क्रिप्ट में महत्वपूर्ण अवधारणा है, इसलिए यदि आप सीधे डीओएम पर ईवेंट जोड़ सकते हैं, तो आप कोड की कुछ पंक्तियां सहेज सकते हैं:

document.addEventListener('change', function(e){ 
    if(e.target.tagName=="SELECT"){ 
    alert('SELECT CHANGED'); 
    } 
})