जावास्क्रिप्ट कोड के भीतर से HTML बटन को ईवेंट हैंडलर्स जोड़ने के लिए कैसे

Question

मैं एक बटन (वर्ग) के HTML में इस तरह सूची है -

<td><button id="18" ></button></td> 
    <td><button id="28" ></button></td> 
    <td><button id="38" ></button></td> 
      ... 

इससे पहले, प्रत्येक बटन के लिए, मैं बटन के भीतर कोड डाल करने के लिए किया था स्वयं ही टैग एक ईवेंट हैंडलर जोड़ने के लिए, इस तरह -

<button id="18" onclick="squareWasClicked(event)"> 

    function squareWasClicked(event) 
    { 
     var element = event.target; 

     // more code 
    } 

लेकिन अब मुझे पता चला है कि यह अच्छा अभ्यास नहीं है। तो इसके बजाय, मैं अपने जावास्क्रिप्ट कोड के भीतर से ईवेंट हैंडलर जोड़ने की कोशिश कर रहा हूं। लेकिन मुझे नहीं पता कि यह कैसे करना है। अब तक, मैंने यह कोशिश की है -

function assignEventsToSquares() 
    { 
    var i,j; 

    for(i=1;i<=8;i++) 
     { 
     for(j=1;j<=8;j++) 
     { 
      var squareID = "" + i + "" + j; 
      var square = document.getElementById(squareID);   
      square.onclick = squareWasClicked(); 
     } 
     } 
    } 

लेकिन यह बस squareWasClicked() फ़ंक्शन को कॉल करता है। तो मैं इसे इवेंट हैंडलर के रूप में कैसे जोड़ूं ताकि स्क्वायर क्लिक होने पर फ़ंक्शन लागू किया जा सके? साथ ही, मैं

 square.onclick = squareWasClicked(event); 

ईवेंट जावास्क्रिप्ट कोड में नहीं पता है। कृपया मदद करे।

Answer 1

square.onclick = squareWasClicked(); 

हो जाएगा यह आपके क्लिक फ़ंक्शन को कॉल करें और अपने तत्व की घटना श्रोता है, जो नहीं है कि आप क्या चाहते करने के लिए परिणाम प्रदान करती है। () एस निकालें ताकि फ़ंक्शन स्वयं असाइन हो जाए। इसलिए, यह इस

square.onclick = squareWasClicked; 

Answer 2

element.addEventListener() का उपयोग करें (DOM 2 Events spec से उत्पन्न)। आपके मामले में यह

document.getElementById("18").addEventListener("click", squareWasClicked, false);