자바스크립트 이벤트 리스너(Event Listener)

Javascript 이벤트 객체 ?

- DOM에서 특정 이벤트가 발생되면 Javascript 이벤트 객체에서 이를 확인할 수 있다 !

  DOM 구조에서 이벤트는 매우 다양하지만 자주 쓰는 이벤트는 아래와 같다

 

＃포커스 이벤트(focus, blur)

＃폼 이벤트(reset, submit)

＃뷰 이벤트(scroll, resize)

＃키보드 이벤트(keydown, keyup)

＃마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave)

＃드래그 앤 드롭 이벤트(dragstart, drag, dragleave, drop)

이벤트리스너 등록하기 !

특정 DOM 요소에 이벤트 리스너를 등록할 때는 addEventListener를 사용한다

DOM객체.addEventListener(이벤트명, 실행할 함수명, 옵션)

 

나는 이번 과제로 제일 간단한, 버튼에 클릭 이벤트를 적용하여 문구를 띄워봤다 

JS 파일에는 이벤트 리스너를 등록했고, HTML 자기소개 페이지의 body에 버튼을 추가했다~!

 

event.js▽

window.onload = function(){			//HTML문서가 로드시, 실행하는 함수
    let btn1 = document.getElementById('btn');  //ID가 btn인 요소를 선택
    btn1.addEventListener('click', function(){  //btn에 이벤트리스너. 이벤트는 클릭
        alert('준비 중입니다 ~!');               //경고창,문구 나오는 함수
    })
}

intro.html▽

<input type="button" value="경력 보기" class="link1" id="btn">      // 버튼 id= btn

 

적용하고 나니 신기하게도 작동을 한다 ~!

처음이라 간단하게 적용해봤지만

다음번엔 더 고도의 기술을 선보일테다 ~