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

检查 here 事件侦听器。
请检查 this fiddle 以获得完整的工作示例。

Answer 2

这个：

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

您正在为 onmouseover 方法分配一个函数 return 值，但它需要一个函数体。因为你的函数没有 return 任何东西，所以它等于：

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

基本上，您立即执行函数，并将 undefined 分配给 onmouse 回调。

要修复它，请将函数体分配给回调。

优化说明，您的两个函数都将它们自己作为第一个参数，这并不是真正需要的，因为您始终可以使用 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中调用对象和函数的区别

the difference between calling object and function in javascript

javascript

html

onmouseover

onmouseout