是否有理由简化此流程以及如何简化？ （JavaScript在搜索字段上输入关键功能）

Question

I've got a simple function that waits for the page to load and then listens for a keyup on a input search field. This works without fail, but I think that creating functions in the global scope save on processing and help write less redundant code.

//Enter button functionality while search field is focused
window.onload = function() {
    var termsField = document.getElementById('search-terms');
    var searchButton = document.getElementById('search-button');
    termsField.addEventListener("keyup", function(event){
        event.preventDefault();
        if (event.keyCode === 13){
            searchButton.click();
        }
    })
}

I tried:

//Enter button functionality while search field is focused
function checkKeyCode(event, buttonVariable){
    event.preventDefault();
    if (event.keyCode === 13){
        buttonVariable.click();
    }
}

window.onload = function() {
    var termsField = document.getElementById('search-terms');
    var searchButton = document.getElementById('search-button');
    termsField.addEventListener("keyup", checkKeyCode(event, searchButton));
}

However, this didn't seem to work as I don't think the addEventListener allows for passing arguments into functions.

My question: Should I try and simplify this, and if so, what are some ideas for implementing a 'cleaner' or 'better' solution? I would appreciate it if you could leave most of the code to me and just help with an working idea, so that I can get the experience. Thanks!

Answer 1

Because you're using only once termsField and searchButton variables, it's not necessary to store them.

You can " simplify " like this

// Enter button functionality while search field is focused
function checkKeyCode(event){
    event.preventDefault();
    if (event.keyCode === 13){
        document.getElementById('search-button').click();
    }
    // or, in one line
    // if (event.keyCode === 13) document.getElementById('search-button').click();
}

window.onload = function() {
    document.getElementById('search-terms').addEventListener("keyup", checkKeyCode);
}