Javascript 未捕获类型错误：调用外部函数而不是匿名函数时addEventListener不工作_Javascript_Dom Events_Typeerror_Addeventlistener_Anonymous Function

Javascript 未捕获类型错误：调用外部函数而不是匿名函数时addEventListener不工作

javascript

Javascript 未捕获类型错误：调用外部函数而不是匿名函数时addEventListener不工作,javascript,dom-events,typeerror,addeventlistener,anonymous-function,Javascript,Dom Events,Typeerror,Addeventlistener,Anonymous Function,我是JavaScript新手，试图了解如何使用内置的addEventListener方法当我通过addEventListener为特定事件调用匿名函数时，没有问题，一切正常。但是，当我为mouseover和mouseout事件调用外部函数时，我得到“uncaughttypeerror” A）工作示例（匿名函数）： B）问题（外部功能）：为了清楚起见，请查看以下内容：完整演示： <!DOCTYPE html> <html> <head>

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

addEventListener

方法

当我通过

addEventListener

为特定事件调用匿名函数时，没有问题，一切正常。但是，当我为

mouseover

和

mouseout

事件调用外部函数时，我得到“

uncaughttypeerror

”

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

B）问题（外部功能）：

为了清楚起见，请查看以下内容：

完整演示：

<!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>


Dom事件侦听器示例#02


按钮1

按钮2

“严格使用”；
var myBtn1=document.getElementById（“myBtn1”）；
var myBtn2=document.getElementById（“myBtn2”）；
//工作场景：使用匿名函数
myBtn1.addEventListener（“mouseover”，function（）{this.style.backgroundColor='yellow'；}）；
myBtn1.addEventListener（“mouseout”，function（）{this.style.backgroundColor='blue'；}）；
//这里的问题是，调用外部函数不起作用
myBtn2.addEventListener（“鼠标上方”，changeBackground（此为“黄色”）；
myBtn2.addEventListener（“mouseout”，changeBackground（这个“蓝色”）；
//外部函数，与上面使用的匿名函数功能相同
功能更改背景（元素、列）{
elem.style.backgroundColor=col；
}

当您将鼠标移到按钮1上时，backgroundColor参数在黄色和蓝色之间切换，因此，
mouseover
和
mouseout
可以正常工作。使用匿名函数向按钮1添加事件
虽然外部和匿名功能相同，但当您将鼠标移入和移出按钮2时，按钮2的背景色没有变化，控制台输出以下错误
未捕获的TypeError:无法设置未定义的属性“backgroundColor”
为什么调用匿名函数和外部函数行为不同，即使它们的功能完全相同？我怎样才能修好它
您正在立即调用
changeBackground（此为“黄色”）
，并尝试将其返回值用作事件侦听器函数
像以前一样将其包装在匿名函数中（或使用生成函数）

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>

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