JS函数始终在我的html开头执行代码

Question

我是JS的新手，我在YouTube上观看了一些速成课程并尝试在同一时间完成。我使用带有扩展名live server的Visual Studio代码，以便快速查看更改。

在我的JS代码中：

    //SUBSCRIBE
    var subscribeEmail = document.getElementById('subscribe-email');
    var subscribeSubmit = document.getElementById('subsribe-link-btn');

//HEADER
    var headerRootWrapper = document.getElementById("navbar-wrapper");
    console.log(headerRootWrapper);
    var show = document.getElementById('sidebar-wrapper');

//LOGO
    var webLogo = document.getElementById('logo');
    console.log(webLogo);

//MENU BAR
    var menuBar = document.getElementById('menu-bar').addEventListener('click', menuSlideLeft());
    console.log(menuBar);
    var sideMenuId = document.getElementById('sidebar-wrapper');

//SEARCH BAR
    var searchBar = document.getElementById('searchBarShow').addEventListener('click',searchStart());

// METHOD 
    function menuSlideLeft() {
        alert("Fire");

}

从我的Html文件中，我在底部添加了js脚本（不在body标签内）。它总是在开始时执行方法menuSlideLeft()而不让我单击menuBar。

<script src="js/jscript.js"></script>

Answer 1

您正在调用此行中的函数

menuSlideLeft()

检查addEventListener函数中的 var menuBar = document.getElementById('menu-bar').addEventListener('click', menuSlideLeft); 部分。

你应该做的是

.addEventListener('click', menuSlideLeft);

i-e只是传递函数的引用。不要打电话给它。它会在那个事件中被调用

Answer 2

从事件侦听器中删除调用该函数的括号。而是使用：

{{1}}

Answer 3

您正在调用函数而不是将其作为参数传递。 解决方案：

document.getElementById('menu-bar').addEventListener('click', menuSlideLeft);