JavaScript 따라하기 5일 차 | 이벤트 input onclick, etc...

Input 이벤트

 - 클릭이나 입력 시 이벤트에 대한 처리를 수행하는 기본적인 방법

 - HTML에서 자바스크립트를 건드리는 방법

 => input 태그의 type="button" 이나 type="text" 속성 뒤에 이벤트속성명="자바스크립트함수()"

속성 종류 - button

 - 1. onclick=""

 => 버튼 클릭 시 ""안의 자바스크립트가 실행됨

 - 2. ondblclick=""

 => 버튼 더블 클릭 시 ""안의 자바스크립트가 실행됨

 - 3. onmouseover="" & mouseenter=""

 => 버튼 위로 마우스가 들어올 시 ""안의 자바스크립트가 실행됨

 - 4. onmouseout="" & mouseleave=""

 => 버튼 밖으로 마우스가 나갈 시 ""안의 자바스크립트가 실행됨

속성 종류 - button | 예시

<input type="button" value="버튼" onclick="alert('버튼')">
<input type="button" value="더블버튼" ondblclick="alert('더블버튼 더블클릭됨!')">
<input type="button" value="버튼오버(mouseover)" onmouseover="alert('버튼오버 mouseover!')">
<input type="button" value="버튼아웃(mouseout)" onmouseout="alert('버튼아웃 mouseout!')">
<!-- mouseover & mouseenter, mouseout & mouseleave 이벤트는 동작 비슷함 -->
<!-- 하나의 컴포넌트에 복수개의 이벤트 연결 가능 -->
<input type="button" value="버튼(mouseover&mouseout)" 
        onmouseover="alert('버튼 mouseover!')" onmouseout="alert('버튼 mouseout!')">

속성 종류 - text

 - 1. onkeydown="" & onkeypress

 => 텍스트 입력 칸에서 키보드를 누를 시 ""안의 자바스크립트가 실행됨

 - 2. onkeyup=""

 => 텍스트 입력 칸에서 키보드를 땔 시 ""안의 자바스크립트가 실행됨

 - 3. onchange=""

 => 텍스트 입력 칸에 있는 값을 수정 후 나갈 때 원래 값과 비교하여 다를 시 ""안의 자바스크립트가 실행됨

 

속성 종류 - text | 예시

onkeydown 이벤트 - <input type="text" onkeydown="alert('onkeydown')"><br>
onkeypress 이벤트 - <input type="text" onkeypress="alert('onkeypress')"><br>
onkeyup 이벤트 - <input type="text" onkeyup="alert('onkeyup')"><br>
onchange 이벤트 - <input type="text" onchange="alert('onchange')">