Year 2022
I know the following possibilities:
option 1 (anonymous function)
function message_me(m_text){
alert(m_text);
}
second.addEventListener('click', function () {
message_me('shazam')
});
option 2 (callback fn calls a annoymous fn)
function message_me(m_text){
return function () {
alert(m_text);
};
}
second.addEventListener('click', message_me('shazam'));
option 3 (bind())
function message_me(m_text){
alert(m_text);
}
second.addEventListener('click', message_me.bind(this,'shazam'));
option 4 (arrow fn)
function message_me(m_text){
alert(m_text);
}
second.addEventListener('click', () => {
message_me('shazam')
});
I personally like to use the (option 4) arrow function because you get the
context included. Another nice solution is the bind (option 3). What bothers me a bit about this variant is that you have to explicitly include the context with this. That can easily be forgotten. Option 1 is fine and this may have been the standard way in the past. To option 2 I can only say: it works but for my taste it looks awkward.
But basically you have to take what you find most understandable from the syntax. Because in the end you have to remember so much, then make your life easier and take what you can remember best. In my case that is option 4 and option 3 then option 1 and option 2 is not an alternative for me.
second.addEventListener('click', message_me)
and have it retrieve the message from the attribute rather than from a parameter.