※ 본인이 공부하면서 JavaScript문서를 보고 만든 예제입니다.
※ 누구나 사용할 수 있습니다. (잘 봤다는 댓글이나 공감 해주시면 감사♥)
※ 좋은 자료 서로서로 공유하며 실력 향상합시다!
※ 모두다 JavaScript 열공! 🙌
목록을 추가하는 이벤트만 있는 예제입니다.
(삭제하는 이벤트는 없음)
요약 설명
- JavaScript를 사용하여 <input>태그에서 text를 입력 후 Enter키를 누르면 <ul>태그에 <li>태그가 추가된다.
- 추가된 <li>태그에는 <input>태그에서 입력한 text의 내용이 적혀있다.
최종 모습
Codepen
See the Pen add list by eziquexx (@eziquexx) on CodePen.
사용한 HTML 태그
- <input>
- <ul>
- <li>
사용한 JavaScript 이벤트
- keydown event
사용한 Methods
- .addEventListener();
- .querySelector();
- .getElementById();
- .createElement();
- .createTextNode();
- .appendChild();
CSS 소스
input[name="addList"] {
padding: 5px;
display: block;
width: 80%;
}
#mylist {
list-style: none;
padding: 0;
}
#mylist li {
line-height: 2em;
margin: 5px 0;
border: 1px solid #ccc;
text-indent: 15px;
}
HTML 소스
<body>
<input type="text" name="addList" placeholder="글자를 입력해주세요.">
<ul id="mylist">
<li>1번째 목록</li>
</ul>
</body>
JavaScript 소스
// newList 변수에 input 요소 가져오기.
const newList = document.querySelector("input[name='addList']");
// .addEventListener 메서드를 사용하여 newList에 keydown 이벤트 주기
newList.addEventListener("keydown", function(event) { // 파라미터로 event값 받기
// 받아온 event의 값이 13과 동일하고 입력한 글자의 길이가 1 이상이면 실행되도록 만들기.
if(event.which === 13 && event.target.value.length > 1) {
// $ul변수에 mylist 요소 가져와 담기.
let $ul = document.getElementById("mylist");
// newItem변수에 li 요소를 생성하여 담기.
let newItem = document.createElement("li");
// txt변수에 newList변수의 value값을 담기.
let txt = document.createTextNode(newList.value);
// newItem에 txt를 자식으로 추가하기.
newItem.appendChild(txt);
// $ul에 newItem을 자식으로 추가하기.
$ul.appendChild(newItem);
}
});
자세한 설명
- <input>태그를 newList 변수에 담는다.
- const newList = document.querySelector("input[name='addList']");
- <input>태그에 keydown event를 적용시킨다.
- keydown event주는 방식은 2가지가 있다.
- 첫번째 방식, addEventListener("keydown", (event) => { 실행시킬 실행문 });
- 소스코드는 newList.addEventListener("keydown", function(event) { 실행시킬 실행문 })
- 두번째 방식, onkeydown = (event) => { 실행시킬 실행문 };
- 소스코드는 newList.onkeydown = function(event){ 실행시킬 실행문 }
- <input>태그에 실행시킬 함수도 작성해준다.
- 실행시킬 함수의 내용은 if문을 사용하여 파라미터(매개변수)로 받은 event 값이 enter키가 맞고 <input>태그에 입력한 글자의 수가 1개 이상이면 다음을 실행시라는 내용을 작성해준다.
- 소스코드는 if (event.which === 13 && event.target.value.length > 1) { 실행시킬 실행문 }
- 알아둘 것!
- 13은 enter키의 코드값이다.
- event.which는 일부 오래된 브라우저와의 호환성을 위해 사용된다고 한다. (ChatGPT 참고)
- 최신 브라우저에서는 event.key나 event.code를 사용하는 것이 좋다고 한다. (ChatGPT 참고)
- 만약에 event.key를 사용한다면 event.key === "Enter" 로 사용하면 된다. (나는 이 방법을 더 선호)
- 만약에 event.code를 사용한다면 event.code === "Enter" 로 사용하면 된다. 하지만 enter키를 눌렀을 때
- 실행시킬 함수의 내용은 if문을 사용하여 파라미터(매개변수)로 받은 event 값이 enter키가 맞고 <input>태그에 입력한 글자의 수가 1개 이상이면 다음을 실행시라는 내용을 작성해준다.
- 3번에서 작성한 if문의 조건문 부분이 true이면 실행시킬 실행문을 작성해준다.
- 변수 $ul에 <ul>태그를 가져와 담는다.
- let $ul = document.getElementById("mylist");
- 변수 newItem에 createElement() 메서드를 사용하여 <li> 요소를 생성하는 내용을 담는다.
- let newItem = document. createElement("li");
- 변수 txt에 createTextNode() 메서드를 사용하여 <input>태그에서 입력한 글자를 담는다.
- let txt = document.createTextNode(newList.value);
- ( ) 소괄호 안에 newList.value 말고 this.value로 작성해도 된다.
- newItem에 txt를 자식으로 추가해준다.
- newItem.appendChild(txt);
- $ul에 newItem을 자식으로 추가해준다.
- $ul.appendChild(newItem);
- 변수 $ul에 <ul>태그를 가져와 담는다.
추가 정보
event.key는 키의 의미를 나타내므로 일반적인 키 입력 처리를 할 때 더 직관적이라고 한다.
event.code는 물리적 키의 위치를 나타내므로, 키보드 레이아웃에 따라 다를 수 있다고 한다.
자료 참고
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code