A）工作示例（匿名函数）;

Question

我是JavaScript的新手，试图了解如何使用内置的 addEventListener 方法。

当我通过 addEventListener 为特定事件调用匿名函数时，没有问题，一切正常并且正常。但是，当我为鼠标悬停和 mouseout 事件调用外部函数时，我会得到＆＃34; Uncaught TypeError＆＃34;

A）工作示例（匿名函数）;

myBtn.addEventListener("mouseover", function(){this.style.backgroundColor = 'yellow';} );
myBtn.addEventListener("mouseout", function(){this.style.backgroundColor = 'blue';} );

B）问题（外部功能）;

myBtn.addEventListener("mouseover", changeBackground(this, 'yellow') );
myBtn.addEventListener("mouseout", changeBackground(this, 'blue') );

为清楚起见，请检查一下;

完整演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Dom Event Listener Example #02</h1>
        <br>
        <button type="button" id="myBtn1">Button 1</button><br>
        <button type="button" id="myBtn2">Button 2</button><br>
        <script>
        "use strict";

        var myBtn1 = document.getElementById("myBtn1");
        var myBtn2 = document.getElementById("myBtn2");

        //working scenario : anonymous function used
        myBtn1.addEventListener("mouseover", function(){this.style.backgroundColor = 'yellow';} );
        myBtn1.addEventListener("mouseout", function(){this.style.backgroundColor = 'blue';} );

        // PROBLEM here, calling exteral function not working
        myBtn2.addEventListener("mouseover", changeBackground(this, 'yellow') );
        myBtn2.addEventListener("mouseout", changeBackground(this, 'blue') );

        // external function, same functionality with anonymous function used above
        function changeBackground(elem, col) {
            elem.style.backgroundColor = col;
        }
        </script>
    </body>
</html>

当您将鼠标悬停在按钮1 上时， backgroundColor 参数会在黄色和蓝色之间切换，因此鼠标悬停和 mouseout 工作得很好。使用匿名功能向按钮1 添加了活动。

虽然外部和匿名功能相同，但当您将鼠标移入并 out 移出 按钮2 ，按钮2和控制台的 backgroundColor 没有变化，输出以下错误;

Uncaught TypeError: Cannot set property 'backgroundColor' of undefined

为什么调用匿名和外部函数的行为不同，即使它们的功能完全相同？我该如何解决？

Answer 1

myBtn2.addEventListener("mouseover", changeBackground(this, 'yellow') );

您正在立即致电changeBackground(this, 'yellow') ，并尝试将其返回值用作事件侦听器功能。

像以前一样将其包装在匿名函数中（或使用the bind method生成函数）。

未捕获的TypeError：调用外部函数而不是匿名函数

A）工作示例（匿名函数）;

B）问题（外部功能）;

完整演示

1 个答案: