[Javascript] 이벤트 대상의 호출할 함수설정 - addEventListener() 함수

 

 

자바스크립트(Javascript)의 addEventListener() 함수

자바스크립트(Javascript)의 addEventListener() 함수는 지정한 이벤트가 대상에 전달될 때마다 호출해야 할 함수를 설정할 때에 사용됩니다. 대부분의 대상은 Element나 Document 이겠지만 이벤트를 지원하는 모든 객체를 대상으로 지정이 가능합니다. addEventListener() 함수는 이벤트 지정의 주어진 유형에 따라서함수나 객체를 이벤트 처리기 목록에 추가하여 이벤트가 이루어지게 됩니다.

addEventListener() 함수는 이벤트를 등록하는데 가장 권장하는 방식이며 여러 개의 이벤트 핸들러를 등록하여 사용이 가능합니다.

 

//문자열 addEventListener() 함수 사용방법

target.addEventListener( [이벤트종류], [호출함수])

 

//addEventListener() 함수를 이용하여 Button 클릭시 Alert 띄우는 이벤트

<input type="button" id="target" value="button" />


<script>
    let test = document.getElementById('target');
    test.addEventListener('click', function(event){
        alert('Event Click, '+ event.target.value);
    });
</script>