javascript 이벤트

이벤트 (Event)

사용자가 웹 페이지와 상호작용할때 발생하는것이다.

예를들어 클릭 , 키보드 입력, 마우스이동 등이 있다.

자바스크립트를 사용하여 이러한 이벤트를 감지하고 그에 따라 특정 작업을 수행할 수 있도록 할 수 있다.

이를 통해 정적인 HTML 웹 페이지를 동적이고 상호작용적인 경험으로 변경시킬 수 있다.

 

이벤트 속성

• onclick : 요소를 클릭했을때 발생하는 이벤트, 버튼 클릭이나 링크 클릭등 사용됨

<button onclick="alert('Clicked!')">Click Me</button>

 

• onchange: 입력 필드의 내용이 변경되었을때 발생하는 이벤트
  <input>,<select>,<textarea> 와 같은 폼 요소에서 사용자의 입력이 변경되었을때 반응함

<input type="text" onchange="alert('Changed!')">

 

 

이벤트 리스너 (Event Listeners)

특정 이벤트가 발생할때마다 호출되어야하는 자바스크립트 함수

웹 개발에서는 이벤트 리스너를 사용하면 사용자의 행동에 따라 다양한 반응을 볼 수 있다.

document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

 

 

위 코드는  Id값이 myButton인 요소에 이벤트 리스너로 클릭 이벤트를 추가하면 알림창이 나타나 "버튼이 클릭되었습니다!" 메시지를 보여준다.

 

이벤트 리스트

웹 페이지에서 다루는 이벤트는 다양하다. 주로 사용되는 몇가지 이벤트를 알아보자

• click : 사용자가 요소를 클릭했을때
• mouseover : 마우스가 요소 위로 이동했을때
• mouseout : 마우스가 요소에서 벗어났을때
• keydown : 사용자가 키보드의 키를 눌렀을때
• load: 웹 페이지 또는 이미지가 완전히 로드되었을때
• submit: 폼이 제출되었을때

좀 더 많은 이벤트 리스트를 알아보고싶다면 구글 검색란에 javascript event list를 검색하면 알 수 있다.