button에 event를 다는 2가지 방법

1.

생활코딩 web2 강의

 

<span id="word">버튼을 클릭하시오</span>
<script>
  function wordColor(color){
  	document.querySelector('#word').color = color
    }
</script>
<input type="button" value="버튼" onclick="wordColor('red')">

 

2.

제로초 자바스크립트 2021강의

<span id="word">버튼을 클릭하시오</span>
<button>버튼</button>
<script>
  const $word = document.querySelector('#word')
  const wordColor = (color) =>()=> {
  document.querySelector('button').style.color=color
  }
  $word.addEventListener('click', wordColor('red'))
</script>

 

<나의 의문>

고차함수로 설정하지 않으면 웹페이지를 열자마자 글자가 빨간색이 되는데...

return값이 뭐길래 그런걸까?

방식1은 함수호출로 바로 해도 괜찮은데,

방식2는 그렇지 않은 이유가 무엇일까?