javascriptのオブジェクトと関数の呼び出しの違い

私は2つのファイルに書き込みます.1つはhtmlで、もう1つはJavaScriptです。だから私はjavascriptのオブジェクトと関数の呼び出しの違い

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

とJavaScriptファイルで行うオブジェクトを呼び出すために私が

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

を行うが、今、私は私のコードを最適化し、その中のオブジェクトと関数を呼び出すためにしようとしています。セクション（4つ）を作成しましたが、onmouseoverとonmouseoutで色を変更しようとしています。ここでは、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>

、ここでは、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"; 
};

しかし、それは働いていません。私は何を間違えたのですか？

出典

2015-12-25 user3488862

[ループ内のJavaScriptの閉鎖 - シンプルな実用的な例]の可能な重複（http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-実用例） – MinusFour

このコードにスクリプトタグを変更し

：イベントリスナーについて

(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]); 
     }; 
    }()); 
    } 
})();

チェックhereを。
完全な使用例については、this fiddleを確認してください。

出典

2015-12-25 14:41:46

'i'は外側スコープからのもので、すべてのイベントハンドラは' sec [2] 'のchangeBackを呼び出します。 –

@hege_hegedusニースキャッチ！これを見ていない:) –

これはまだ間違っています –

この：

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

あなたがonmouseoverメソッドに関数の戻り値を代入している、まだそれは関数本体を期待しています。あなたの関数は何も返さないので、それはに等しいです：

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

基本的に、あなたは即座にあなたの関数を実行し、onmouseコールバックに未定義割り当てます。

これを修正するには、関数本体をコールバックに割り当てます。

thisを使用してイベント要素を常に参照することができるため、両方の関数自体が最初のパラメータであり、実際には必要ありません。

出典

2015-12-25 14:42:19 Shomz

()演算子（呼び出し演算子）が関数を呼び出します。基本的にハンドラを設定するのではなく、ハンドラを呼び出すことになります。ハンドラを追加するための1つのオプションは次のとおりです。

// 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); 
});

出典

2015-12-25 14:59:28 undefined

javascriptのオブジェクトと関数の呼び出しの違い

答えて

関連する問題