页面加载时search函数自动执行的原因排查求助

问题核心出在这行代码：

button.onClick = search();

这里的search()是直接调用函数，页面加载到该行时就会立即执行search，而非把函数绑定到按钮的点击事件上。你需要去掉括号，只传递函数的引用，这样只有按钮被点击时才会触发函数。

另外注意原生JS里的事件属性是小写的onclick，驼峰写法onClick虽部分浏览器兼容，但不符合规范，建议统一用小写。

修正后的JS代码 #

const input = document.querySelector('#search-input-bar')
const button = document.querySelector('#search-button')

input.addEventListener('keydown', function (e) {
    if (e.code === 'Enter') {
        search()
    }
})

function search(){
    let url = 'https://www.google.com/search?q=' + input.value;
    window.open(url);
}

// 修复：去掉括号传递函数引用，改用规范的小写onclick
button.onclick = search;

更推荐的事件绑定方式 #

使用addEventListener绑定点击事件，这种方式允许给同一元素绑定多个同类型事件，不会覆盖已有绑定：

button.addEventListener('click', search);

HTML部分无需修改，保持原样即可：

<input id="search-input-bar" type="text">
<button id="search-button">Search</button>

内容的提问来源于stack exchange，提问作者Zketra