der Unterschied zwischen aufrufenden Objekt und Funktion in Javascript

Ich schreibe in zwei Dateien - eine ist HTML und eine ist JavaScript. So ein Objekt zu nennen ichder Unterschied zwischen aufrufenden Objekt und Funktion in Javascript

document.getElementById("nameObj").onmouseover = changeMe;

und in der JavaScript-Datei kann ich

changeMe = function() 
{ 
//and here i write the function 
}

aber jetzt versuche ich meinen Code zu optimieren und eine Funktion mit Objekten darin zu nennen. Ich habe Abschnitte (4 davon) erstellt und ich versuche, die Farbe mit onmouseover und onmouseout zu ändern. Hier ist der Code des html:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css"> 
     <script src="script.js"> </script> 
     <title> test 2</title> 
    </head> 
    <body> 
     <header> </header> 
     <div id="wrapper"> 
     <main> 
     <section class="mysection" id="section1"> </section> 
     <section class="mysection" id="section2"> </section> 
     <section class="mysection" id="section3"> </section> 
     <section class="mysection" id="section4"> </section> 
     </main> 
     <div class="clear"> </div> 
     </div> 
     <footer> </footer> 
       <script> 
      (function(){ 
       var sec = document.getElementsByClassName("mysection"); 
       for(var i=0; i<3; i++) 
       { 
        sec[i].onmouseover=changeMe(sec[i], i); 
        sec[i].onmouseout=changeBack(sec[i]); 
       } 
      })(); 
     </script> 
    </body> 
</html>

und hier ist JS:

function changeMe(t_section, count) 
{ 
    if(count==0) 
    { 
     t_section.style.background="yellow"; 
    } 
    if(count==1) 
    { 
     t_section.style.background="blue"; 
    } 
    if(count==2) 
    { 
     t_section.style.background="green"; 
    } 
    if(count==3) 
    { 
     t_section.style.background="red"; 
    } 
}; 

function changeBack(t_section) 
{ 
    t_section.style.background="gray"; 
};

Aber es funktioniert nicht. Was habe ich falsch gemacht?

Quelle

2015-12-25 user3488862

Mögliche Duplikat [JavaScript-Verschluss Innenschleifen - einfaches praktisches Beispiel] (http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple- Praxisbeispiel) – MinusFour

zu diesem Code ändern Skript-Tag:

(function(){ 
    var sec = document.getElementsByClassName("mysection"); 
    for(var i = 0; i < 4; i++) 
    { 
    sec[i].addEventListener('mouseover', function() { 
     var index = i; 
     return function() { 
     changeMe(sec[index], index); 
     }; 
    }()); 
    sec[i].addEventListener('mouseout', function() { 
     var index = i; 
     return function() { 
     changeBack(sec[index]); 
     }; 
    }()); 
    } 
})();

prüfen here über Event-Listener.
Bitte überprüfen this Geige für das gesamte Arbeitsbeispiel.

Quelle

2015-12-25 14:41:46

'I' von dem äußeren Umfang ist, werden alle Event-Handler Zurückwechsel auf' s [2] ' –

@hege_hegedus Nizza Fang nennen! Habe das nicht gesehen :) –

Das ist immer noch falsch –

Dies:

sec[i].onmouseover=changeMe(sec[i], i); 
sec[i].onmouseout=changeBack(sec[i]);

Sie eine Funktion Rückgabewert auf den onmouseover Methode zuweisen, aber es erwartet einen Funktionskörper. Da Ihre Funktionen alles nicht zurückgeben, ist es gleich:

changeMe(sec[i], i); 
sec[i].onmouseover=undefined; 
changeBack(sec[i]); 
sec[i].onmouseout=undefined;

Grundsätzlich Sie Ihre Funktion sofort ausführen, und den OnMouse Rückrufe undefined zuzuweisen.

es zu beheben, weisen Sie den Funktionskörper auf die Rückrufe.

Optimierungshinweis, beide Funktionen haben sich selbst als erster Parameter und das ist nicht wirklich notwendig, weil Sie immer auf das Ereigniselement mit this verweisen können.

Quelle

2015-12-25 14:42:19 Shomz

Der Operator () (Aufrufoperator) ruft eine Funktion auf. Sie rufen also im Grunde die Handler an, anstatt sie festzulegen. Eine Möglichkeit für die Handler hinzugefügt ist:

// Create a basic array 
var sections = [].slice.call(document.querySelectorAll(".mysection")); 
// using an array for setting the background colors 
var colors = ['yellow', 'blue', 'green', 'red']; 

function hover(event) { 
    var color = 'gray'; 

    if (event.type === 'mouseover') { 
     // get the index of the mouseovered element 
     // and use it for getting the corresponding color 
     color = colors[ sections.indexOf(this) ]; 
    } 

    this.style.background = color; 
} 

sections.forEach(function(el) { 
    el.addEventListener('mouseover', hover); 
    el.addEventListener('mouseout', hover); 
});

Quelle

2015-12-25 14:59:28 undefined

der Unterschied zwischen aufrufenden Objekt und Funktion in Javascript

Antwort

Verwandte Themen