Event: keydown, keypress, keyup

검색어를 칠 때 버튼을 누르고 난 직후에 검색이 되게 하려고 함
keydown은 검색어를 입력한 직후는 앞에 값을 보여줌. 그 다음 문자를 넣어야 전에 입력한 것이 출력됨.

keyup은 누름과 동시에 값이 출력됨

왜 그렇지....??
>> because of the firing moment. The key value adds later when I use keydown in the event listener. Because the default comes later than key event.

 

	keydown	keypress	keyup
		This event has been deprecated, no longer recommended.  Use beforeinput or keydown instead.
firing moment	Fired when a key is pressed.	Fired when a key is pressed down.	Fired when a key is released.
	fires first, and always before the browser processes the key.	fires after keydown, and before the browser processes the key.	fires last, after the default action of that key has been performed.
Key coverage	For all keys, regardless of whether they produce a character value.	That produces a character value	For all keys, regardless of whether they produce a character value.
value	provide a code indicating which key is pressed	indicates which character was entered	provide a code indicating which key is pressed
	lower case 'a' : 65	lower case 'a' : 97	lower case 'a' : 65
Bubbles	Yes	Yes	Yes
Cancelable	Yes	Yes	Yes
	Cancelable by using the event’s preventDefault method.	can cancel and stop bubbling. preventDefault method.	No default action, so can't prevent the default. **Check the below to know How to.
Event handler property	onkeydown		onkeyup
equivalent	document.onkeydown = logKey;	document.onkeypress = logKey;	document.onkeyup = logKey;

**[Cancel the keyup events]
To ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keyCode relating to an event that has been processed by an IME):

eventTarget.addEventListener("keyup", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

 

 

 

---

MDN docs

https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event

others

https://www.mutuallyhuman.com/blog/keydown-is-the-only-keyboard-event-we-need/#:~:text=keydown%20%E2%80%93%20fires%20when%20any%20key,%2C%20moving%20focus%2C%20etc).&text=keyup%20%E2%80%93%20fires%20when%20any%20key,the%20browser%20processes%20the%20key.

 

 

HTMLElement: beforeinput event

Experimental technology, which means that the technology is nascent and immature, and currently in the process of being added to the Web platform (or considered for addition).

 

1. fires when the value of an <input>, <select>, or <textarea> element is about to be modified. 

2. applies to elements with contenteditable enabled, and to any element when designMode is turned on.

   : the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event