What is purpose of items in function parentheses?

Question

function handleButtonClick(e) {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
//alert("Adding " + songName);

if (songName == "") {
    alert("Please enter a song");
}
else {
    //alert("Adding " + songName);
    var li = document.createElement("li");
    li.innerHTML = songName;
    var ul = document.getElementById("playlist");
    ul.appendChild(li);

    // for Ready Bake
    save(songName);
}
}

At this code why we put an "e" into function that stays in first line. As far as i can see, we didn't used it except there?

Answer 1

From the name of the function, I'm assuming this is a click handler attached to a button on your page. Normally, when an event is triggered, the browser passes an Event object as an argument to the event handler. In your code, the e argument would contain this Event object. In your event handler you are not using the passed in Event object and hence this can be removed.

However, at times you may want to use the passed in event object. For example: you may want a certain action to be performed when the button is clicked and a different action to be performed when the button is clicked with the Ctrl key held down. In this case, you would use the ctrlKey property of the passed in Event object to determine which action to perform.