[국비 프론트 단위 평가] 이벤트 리스너를 활용해 글자 제어하기 (코드 있음)

<div>
<table id="table1">
	<tr>
		<th>이름</th>
		<th>아이디</th>
	</tr>
	<tr>
		<td>
			<div>홍길동</div>
			<input type="text">
		</td>
		<td>
			<div>Mr.Hong</div>
			<input type="text">
		</td>
	</tr>
</table>
</div>

 

<style>
table {width: 500px;}
table, th, td{
	border: 1px solid black;
	border-collapse: collapse;
	padding: 5px;
	font-size: 1.2em;
}
th {width: 50%;}
th, td {
	padding: 10px;
}
td{
	background-color: orange;
}

#table1 div, #table1 input{
	width: 100%;
	font-size: 1.2em;
	padding: 2px;
	margin: 0;
}

#table1 input {
	border: none;
}

.hidden {  /* class="hidden" 이면 보이지 않는다 */
	display: none;
}

</style>

---

첫번째 함수 이벤트 리스너

//현 전체문서   css선택자 #기호는 ID를 나타내고 #table1은 ID가 "table"인 요소를 참조하며 그 요소의 내부에서 'div'태그를 모두 선택하려는 것을 의미합니다.

for(e of document.querySelectorAll("#table1 div")) {        //for...of루프를 사용하여, 위의 div요소에 반복문 수행 대해변수 'e'에다가 넣고 이벤트 주기

    e.addEventListener("click", function() {    // 이 코드는 각 'div'요소에 클릭 이벤트 리스너를 추가합니다 'div'를 클릭하면 인라인 함수가 호출됩니다.

    let text = this.innerHTML.trim();   // this는 이벤트 리스너 내부에서 클릭된 'div'요소를 참조한다. innerHTML은 해당 'div'의 HTML 내용을 가져오며, trim()은 앞 뒤의 공백을 제거합니다. 그, 결과 'tex'변수에는 클릭된 'div'의 텍스트 내용이 저장됩니다.

    this.classList.add('hidden');       // 클릭된 'div'에 'hidden'클래스를 추가합니다. 'hidden'클래스는 CSS에서 'display: none'으로 정의 되어 있으므로 해당 'div'는 보이지 않게됨

    let input = this.nextElementSibling;    // nextElementSibling는 현재 요소 바로 다음의 형제 요소를 참조합니다 그럼 'div'다음인 'input'을 참조

    input.classList.remove('hidden');       // 그리고 remove('hidden')을 사용하여 'input'요소가 보여집니다.

 

    input.value = txt;      //

    input.focus();

    })

}

input.value = txt; 코드는 input 요소의 값으로 클릭된 div의 텍스트 내용을 설정합니다. 그리고 input.focus();는 해당 input 요소에 포커스를 맞춰 사용자가 즉시 텍스트를 수정할 수 있도록 합니다.

이렇게 설정된 코드는 테이블의 각 셀에 표시된 텍스트(div 요소)를 클릭하면, 텍스트를 수정할 수 있는 input 박스가 나타나게 하는 동작을 구현합니다.

---

switchInput 함수는 HTML 요소의 참조를 인자로 받아 해당 요소의 값을 가져와 조작하고, 현재 요소와 이전 형제 요소에 클래스를 추가하거나 제거하는 기능을 수행합니다.

function switchInput(e){    // 'e'를 매개변수로 받고 switchInput()함수 호출

// e.value는 e 요소의 value 속성 값을 가져옵니다.

// trim() 메서드는 문자열의 앞뒤 공백을 제거합니다.

// 결과적으로 txt 변수에는 e 요소의 앞뒤 공백이 제거된 value 값이 저장됩니다.

    let txt = e.value.trim();

//  e 요소에 'hidden' 클래스를 추가합니다.

//  이렇게 되면 해당 요소는 CSS 스타일에 따라 숨겨질 것입니다 (예: display: none).

    e.classList.add('hidden');

//   previousElementSibling는 현재 요소 바로 앞의 형제 요소를 참조합니다.

//   따라서, div 변수는 e 요소 바로 앞의 HTML 요소를 참조합니다.

    let div = e.previousElementSibling;

//  div 요소에서 'hidden' 클래스를 제거합니다. 이렇게 되면 해당 요소는 다시 보여질 것입니다.

    div.classList.remove('hidden');

    // div 요소의 내부 HTML을 txt 값으로 설정합니다. 이를 통해 div의 텍스트 내용이 변경됩니다.

    div.innerHTML = txt;

  }

---

이 함수는 주로 <input> 요소에서 값을 수정한 후, 해당 값을 바로 앞의 <div> 요소에 표시하고 <input> 요소를 숨기기 위해 사용될 수 있습니다. 이는 테이블에서 직접 텍스트를 클릭하여 수정하고, 수정 완료 후에 원래 텍스트 표시 방식으로 돌아가는 동작을 구현하는 데 유용합니다.

function switchInput(e){    // 'e'를 매개변수로 받고 switchInput()함수 호출

// e.value는 e 요소의 value 속성 값을 가져옵니다.

// trim() 메서드는 문자열의 앞뒤 공백을 제거합니다.

// 결과적으로 txt 변수에는 e 요소의 앞뒤 공백이 제거된 value 값이 저장됩니다.

    let txt = e.value.trim();

//  e 요소에 'hidden' 클래스를 추가합니다.

//  이렇게 되면 해당 요소는 CSS 스타일에 따라 숨겨질 것입니다 (예: display: none).

    e.classList.add('hidden');

//   previousElementSibling는 현재 요소 바로 앞의 형제 요소를 참조합니다.

//   따라서, div 변수는 e 요소 바로 앞의 HTML 요소를 참조합니다.

    let div = e.previousElementSibling;

//  div 요소에서 'hidden' 클래스를 제거합니다. 이렇게 되면 해당 요소는 다시 보여질 것입니다.

    div.classList.remove('hidden');

    // div 요소의 내부 HTML을 txt 값으로 설정합니다. 이를 통해 div의 텍스트 내용이 변경됩니다.

    div.innerHTML = txt;

  }

---

//   document.querySelectorAll("#table1 input")는 #table1 내의 모든 <input> 요소를 선택하여

//   NodeList 형식으로 반환합니다. 이 루프는 NodeList의 각 항목에 대해 반복합니다.

//   여기서 e는 현재 반복중인 <input> 요소를 참조합니다.

  for(e of document.querySelectorAll("#table1 input")){

    //  현재 <input> 요소(e)에 'hidden' 클래스를 추가합니다.

    //  이렇게 되면 해당 요소는 CSS 스타일(.hidden { display: none; })에 따라 보이지 않게 됩니다.

    e.classList.add('hidden');

    //  focusout 이벤트는 요소에서 포커스가 벗어났을 때 발생합니다.

    //  해당 이벤트가 발생하면 switchInput 함수를 호출하며,

    //  이 때 호출되는 함수에 this (즉, 포커스가 벗어난 <input> 요소)를 인자로 전달합니다.

    e.addEventListener("focusout", function(){

        switchInput(this);

    });

    //  키 누름 이벤트 리스너 추가:

    // keyup 이벤트는 키보드의 키를 눌렀다가 뗐을 때 발생합니다.

    // (event.keyCode == 13) && switchInput(this); 이 코드는 사용자가 Enter 키(keyCode 13)를

    //  눌렀을 때만 switchInput 함수를 호출합니다. 다른 키를 누르면 아무런 동작도 발생하지 않습니다.

    // && 연산자는 논리 AND 연산자입니다. 이를 'short-circuit evaluation' 방식으로 사용하여,

    //  왼쪽 조건이 참일 때만 오른쪽의 코드(switchInput(this))가 실행됩니다.

    e.addEventListener("keyup", function(event){

        (event.keyCode == 13) && switchInput(this);

    });

 }

//  결과적으로, 이 코드는 #table1 내의 모든 <input> 요소를 숨기고,

//   해당 <input> 요소에서 포커스가 벗어나거나 Enter 키를 눌렀을 때 switchInput 함수를 호출하여

//    <input> 요소와 이전의 <div> 요소 사이에 표시 및 값 변경을 처리합니다.

네, 주어진 코드의 실행 순서에 번호를 매기면 다음과 같습니다:

1. **초기 선택**:

   ```javascript
   for(e of document.querySelectorAll("#table1 input")){
   ```
   `#table1` 내의 모든 `<input>` 요소를 선택합니다.

2. **`<input>` 요소 초기 상태 설정**:

   ```javascript
   e.classList.add('hidden');
   ```
   현재 반복 중인 `<input>` 요소(`e`)에 'hidden' 클래스를 추가하여 해당 요소를 숨깁니다.

3. **포커스 아웃 이벤트 리스너 추가**:

   ```javascript
   e.addEventListener("focusout", function(){
       switchInput(this);
   });
   ```
   현재 `<input>` 요소(`e`)에 'focusout' 이벤트 리스너를 추가합니다. 이 리스너는 해당 요소에서 포커스가 벗어났을 때 `switchInput` 함수를 호출합니다.

4. **키 누름 이벤트 리스너 추가**:

   ```javascript
   e.addEventListener("keyup", function(event){
       (event.keyCode == 13) && switchInput(this);
   });
   ```
   현재 `<input>` 요소(`e`)에 'keyup' 이벤트 리스너를 추가합니다. 사용자가 Enter 키(`keyCode` 13)를 눌렀을 때만 `switchInput` 함수를 호출합니다.

5. **루프의 종료**:
   위의 단계들(2~4)은 `#table1` 내의 각 `<input>` 요소에 대해 반복됩니다. 모든 `<input>` 요소에 대해 처리가 완료되면 루프는 종료됩니다.

이렇게 각 `<input>` 요소에 대하여 숨기는 동작을 설정하고, 이후의 이벤트 리스너를 추가하는 과정을 순차적으로 수행합니다.