bindEvent

bindEvent : JavaScript에서 DOM 요소에 이벤트를 바인딩(연결)하는 함수

이 함수는 주로 이벤트 리스너를 등록하는 데 사용되며, 특정 이벤트가 발생했을 때 실행할 함수를 지정할 수 있도록 도와준다.

 

예시코드를 살펴보자 !

const button = document.getElementById('myButton');
function handleClick() { console.log('Button clicked!'); } 
button.addEventListener('click', handleClick);

위 코드에서 addEventListner를 사용하여 버튼 요소에 click이벤드를 감지하고,

이벤트 발생 시 handleClick 함수를 실행하도록 코드를 작성했다.

그런데 때로는 이벤트 리스너를 등록할 때 , 함수 내부에서 this 의 값을 다루는 경우가 있는데, 이때 bind 메서드를 사용하여 함수 내에서 this의 값을 지정할 수 있다. 이를 더 간편하게 사용하기 위해 일부 라이브러리에서 bindEvent 와 같은 함수를 제공한다.

이 함수는 이벤트리스너 등록 시에 함수 내에서의 this 값을 원하는 대상으로 고정시켜주는 역할.

 

const button = document.getElementById('myButton');
function handleClick() { console.log(this.textContent + ' clicked!'); } 
button.addEventListener('click', handleClick.bind(button));

위 코드에서 handleClick.bind(button)를 통해 함수 내에서 this를 항상 button 요소로 고정을 했다.

이렇게 하면 클릭할때마다 해당 버튼의 텍스트가 로그에 출력

bindEvent 함수의 이름과 역할은 구체적인 라이브러리나 프레임워크에 따라 다를 수 있으므로, 사용하는 환경과 라이브러리에 따라 정확한 동작을 확인하는 것이 중요하다.