
클릭 이벤트는 사용자가 웹 페이지 안에서 마우스 왼쪽 버튼을 클릭할 때 발생하는 이벤트이다.
대표적인 예로 <button> 요소에 클릭 이벤트가 일어나는지를 감시하고 클릭 이벤트가 일어나는 순간 특정 함수를 실행시키려면 <button> 태그에 onclick 속성을 사용해서 처리할 수 있다.
change 이벤트는 값이 변경되었을 때 발생하는 이벤트이다.대표적으로 change 이벤트가 발생하는 DOM 요소는 <select>, <input type="checkbox">, <input type="radio"> 태그이다.
<select>는 선택할 수 있는 여러 개의 옵션에서 하나 이상의 옵션을 선택할 때 사용하는 DOM 요소이다. <select>에서 사용자가 선택하는 옵션을 바꿀 때마다 웹에서는 change 이벤트가 발생되고, 자바스크립트에서 이 이벤트를 감시하며 이벤트가 일어나는 시점에 특정 함수를 실행하려면 <select> 태그에 onchange 속성을 사용해 처리할 수 있다.
focus 이벤트는 input type="text" 요소처럼 사용자가 텍스트, 숫자 같은 데이터를 입력할 수 있는 DOM 요소에 마우스를 위치할 때 발생하는 이벤트이다.
blur 이벤트는 입력 가능한 DOM 요소에 마우스가 포커스 되었다가 다른 DOM 요소로 이동할 때, 즉 현재 마우스가 포커스 되어 있는 DOM 요소를 빠져나가려 할 때 발생하는 이벤트이다.
blur 이벤트는 입력 요소에 입력된 데이터가 정확한 형식으로 입력되었는지, 혹은 필수 입력 값인데 값이 입력되었는지를 입력 DOM 요소에서 빠져나가는 순간 확인하는 용도로 사용할 수 있다.