javascript中調用對象和函數之間的區別

Question

我正在寫兩個文件 - 一個是html，一個是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";
};

但它不起作用。 我做錯了什么？

Answer 1

將腳本標記更改為以下代碼：

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

在這里查看事件監聽器。
請查看這個小提琴，了解完整的工作示例。

Answer 2

這個：

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回調分配undefined。

要修復它，請將函數體指定給回調。

優化注釋，你的兩個函數都將自己作為第一個參數而不是真的需要，因為你總是可以使用this來引用事件元素。

Answer 3

()運算符（ 調用運算符 ）調用一個函數。 所以你基本上是在調用處理程序而不是設置它們。 添加處理程序的一個選項是：

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

javascript中調用對象和函數之間的區別

問題描述

3 個解決方案

解決方案1
4 已采納 2015-12-25 14:41:46

解決方案2
2 2015-12-25 14:42:19

解決方案3
1 2015-12-25 14:59:28

javascript中調用對象和函數之間的區別

問題描述

3 個解決方案

解決方案1 4 已采納 2015-12-25 14:41:46

解決方案2 2 2015-12-25 14:42:19

解決方案3 1 2015-12-25 14:59:28

解決方案1
4 已采納 2015-12-25 14:41:46

解決方案2
2 2015-12-25 14:42:19

解決方案3
1 2015-12-25 14:59:28