자바스크립트 이벤트 - click / change / keyboard

click -

자바스크립트의 click 함수는 사용자가 클릭을 하지 않아도

강제적으로 이벤트를 발생시키는 함수입니다.

예시로 input창에 키보드로 입력을 할때에 버튼을 클릭을 하지 않고

강제로 이벤트를 발생시킬때 사용하기도 합니다.

 

*input창에 키보드로 값을 입력했을 때 

강제로 확인 버튼의 이벤트를 발생시키는 것이다

 

배너메이커 할 때 값만 입력하고 확인 안눌러도

이미지 사이즈가 바뀌는건 click 이벤트로 하면 된다

 

 

input 창에 onkeyup 이벤트가 발생하면 'handleInputOnkeyup()' 함수를 호출하고,

이 함수는

'document.getElementById('my_btn')'

'확인' 버튼 element를 선택하고,

'document.getElementById('my_btn').click()'

'확인' 버튼 element에서 click() 함수를 호출하여 강제로 버튼을 클릭한 효과를 줍니다.

 

 

 change-

change 이벤트는 요소 변경이 끝나면 발생합니다.

텍스트 입력 요소인 경우에는 요소 변경이 끝날 때가 아니라 포커스를 잃을 때 이벤트가 발생합니다.

 

텍스트 입력 요소 예시를 살펴봅시다. 아래 텍스트 입력 필드에 글자를 입력하는 동안엔 이벤트가 발생하지 않습니다.

 

하지만 버튼을 클릭하는 등의 동작을 통해 포커스를 다른 곳으로 옮기는 순간 change 이벤트가 발생합니다.

 

 

<input type="text" onchange="alert(this.value)">

<input type="button" value="버튼">

 

참조

https://ko.javascript.info/events-change-input

 

 

 

 

 

keyboard-

키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생한다.

키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생. 

 

window.onkeydown = (e) => console.log(e);

window.addEventListener("keydown", (e) => console.log(e));

 

참조

https://www.daleseo.com/js-key-events/