함수, 함수() 방식 차이

1번 방식 : 함수 내에서 this 사용하여 클릭한 요소에 접근 

let small = document.querySelectorAll("#imglist > li > .small");
for(let i=0; i<small.length; i++) {
    small[i].addEventListener("click", imgClick);
}

function imgClick() {
    document.getElementById("bigImg").setAttribute("src", this.src); //this는 현재 이벤트가 발생한 node
}

addEventListener('click', 함수명) : addEventListener 함수의 매개변수로써 'click'과 함수명이 전달되는 것.
즉 함수명을 등록해둔 것이다. 함수명()을 했다면 click이벤트와 무관하게 실행이 되어버린다.

 

2번 방식 : 함수에 매개변수를 전달하여 클릭한 요소에 접근 

let small = document.querySelectorAll("#imglist > li > .small")

for(let i=0; i<small.length; i++) {
	small[i].addEventListener("click", (event)=>imgClick(event.target))
}

function imgClick(par){
	document.getElementById("bigImg").setAttribute("src", par.src)
}

이벤트 핸들러 함수 외부의 변수나 상태를 사용하기 쉬울 수 있습니다. 예를 들어, 클로저(closure)를 사용하여 외부 변수에 접근하거나 함수를 반환하는 패턴을 사용할 수 있습니다. 이러한 선택은 코드의 구조와 요구 사항에 따라 다를 수 있습니다. ==> 이 말이 우선 와닿지가 않아서 다시 정리하도록 하자!