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小提琴，了解完整的工作示例。

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 个答案: