wie nicht

Question

JQuery hinzufügen

ich versuche, wie Event-Element durch eine Funktion hinzuzufügen, wie folgt

function addevent(elements,event_n,function_n,param_trs) 
    { 
      var i = elements.length; 
     while (i--){ 
      function_name=function_n+"(this.getAttribute('"+param_trs+"'))"; 
      //function_name=function_n ; 
      elements[i].addEventListener(event_n,function_name); 
      // console.log(function_name); 
     } 
    } 

dies geben Fehler:

TypeError: Value not an object.

at elements[i].addEventListener(event_n,function_name);

, so kann ich sie coll als

addevent(document.querySelectorAll('tr'),'click','view_details','request_id'); 

folgen Click-Ereignis für alle tr Blutzuckerwer hinzufügen le:

<tr request_id="5" onclick="view_details(this.getAttribute('request_id'))" > 

oder

<tr request_id="5" onclick="view_details(this)" > 

wie kann ich es durch Funktion tun wie oben

Answer 1

Es ist wirklich eine schlechte Idee, Funktionsnamen als String zu übergeben. Dasselbe gilt für das Anhängen von Code im Zeichenfolgenformat, z. B. "(this.getAttribute('"+param_trs+"'))". Dies muss geparst werden, ähnlich wie eval tut. Es ist ineffizient und kann zum problems related to eval führen.

Funktionen können als Argumente übergeben werden, nicht als Strings, sondern als echte Funktionsreferenzen. Zweitens wäre es zweckmäßiger, dass die Ereignisbehandlungsfunktion den Attributwert zu dem Zeitpunkt abruft, zu dem sie ausgeführt wird, nicht vorher.

Also hier ist ein Ausschnitt, der die Idee darstellt. Die Demo nimmt das Attribut data-inc, um festzustellen, um wie viel eine Zahl inkrementiert werden soll.

function addEventListeners(elements, event_n, attrib_n, func) { 
 
    var i = elements.length; 
 
    while (i--) { 
 
     // bind the attribute name as argument to the function. 
 
     elements[i].addEventListener(event_n, func.bind(elements[i], attrib_n)); 
 
    } 
 
} 
 

 
// Demo: 
 
addEventListeners(document.querySelectorAll('span'), 'click', 'data-inc', 
 
    function(attrib_n) { 
 
     this.textContent = +this.textContent + +this.getAttribute(attrib_n); 
 
    } 
 
);

span { border: 1px solid; padding: 2px; background: #C0FFC0 }

Click on numbers to change them:<br> 
 
Per 5: <span data-inc="5">0</span> Per 7: <span data-inc="7">0</span> 
 
Per 1: <span data-inc="1">0</span> 
 
Per -1: <span data-inc="-1">0</span>