이벤트(Event)

• 이벤트(Event) : 동작, 행위
  - 브라우저에서의 동작, 행위 : click, keydown, keyup, change, submit, ...
  
  
• 이벤트 리스너(Event Listener)
  - 이벤트가 발생하는 것을 대기하고 있다가 이벤트가 발생하는 것이 감지되면 연결된 기능(함수)를 수행하는 것
  
  
• 이벤트 핸들러(Event Handler)
  - 이벤트 리스너에 연결된 기능으로 이벤트 발생 시 수행하고자 하는 내용을 작성해둔 함수(function)

---

• 1) 인라인 이벤트 모델
  - 요소 내부에 이벤트를 작성하는 방법으로,
    on이벤트명 = 함수명() 형태로 작성

<button onclick="test1(this)">인라인 이벤트 모델 확인</button>

// 인라인 이벤트 모델
// ex) 버튼의 배경색, 글자색 변경
function test1(button){ // 변수 button에는 이벤트가 발생한 요소(== button)가 담겨 있음
   button.style.backgroundColor = "purple";
   button.style.color = "yellow";
}

See the Pen Untitled by Namu (@Namu-the-sans) on CodePen.

---

• 2) 고전 이벤트 모델
  - 요소가 가지고 있는 이벤트 속성(이벤트 리스너)에 이벤트 핸들러를 연결하는 방법으로,
    인라인 모델처럼 HTML 요소에 JS 코드가 포함되는 것이 아닌 script에만 이벤트 관련 코드를 작성할 수 있음

<button id="test2-1">고전 이벤트 모델 확인</button>
<button id="test2-2">#test2-1 이벤트 제거</button>
<button id="test2-3">고전 이벤트 모델 단점</button>

// 고전 이벤트 모델

// 고전 표준 이벤트 모델은 랜더링(화면해석)된 HTML 요소에 이벤트 관련 동작을 부여하는 코드

// ★★ 랜더링 되지 않은 요소에는 이벤트 관련 동작을 추가할 수 없음 ★★
//      [문제 원인 : HTML 코드 해석 순서 (위 -> 아래)]
//      -> 해결 방법 : HTML 요소가 먼저 랜더링된 후 JS 코드 수행

document.getElemetnByID('test2-1').onclick=function(){
   // 익명 함수(이벤트 핸들러에 많이 사용)
   alert('고전 이벤트 모델 알림창');
}

// 이벤트 제거
document.getElementById('test2-2').onclick=function(){
   // #test2-1의 이벤트를 제거
   document.getElementById('test2-1').onclick=null;
   alert('#test2-1의 이벤트를 제거함');
}

// 고전 이벤트 모델 단점
// -> 한 요소에 동일한 이벤트 리스너(onclick)에 대한
//    다수의 이벤트 핸들러(배경색 변경, 폰트 변경)를 작성할 수 없음
//    (작성 시 마지막으로 해석된 이벤트 핸들러만 적용됨)
document.getElementById('test2-3').onclick=function(event){
   // 버튼 색 바꾸기
   // 방법 1) 요소를 문서에서 찾아서 선택
   // document.getElementById('test2-3').style.backgroundColor='red';
   
   // 방법 2) 매개변수 e 또는 event 활용
   // -> 이벤트 핸들러에 e 또는 event를 작성하는 경우
   //    해당 이벤트와 관련된 모든 정보가 담긴 이벤트 객체가 반환됨
   // event.target : 이벤트가 발생한 요소
   // event.target.style.backgroundColor='skyBlue';
   
   // 방법 3) this 활용 -> 이벤트가 발생한 요소(== event.target)
   this.style.backgroundColor='green';
}

/* document.getElementById('test2-3').onclick=function(){
      document.getElementById('test2-3').style.fontSize='30px';
*/

See the Pen Event-2 by Namu (@Namu-the-sans) on CodePen.

See the Pen event-3 by Namu (@Namu-the-sans) on CodePen.

See the Pen event-4 by Namu (@Namu-the-sans) on CodePen.

See the Pen event-5 by Namu (@Namu-the-sans) on CodePen.

See the Pen event-6 by Namu (@Namu-the-sans) on CodePen.

See the Pen event-7 by Namu (@Namu-the-sans) on CodePen.

※ 고전 이벤트 모델 단점 : 한 요소에 동일한 이벤트 리스너(onclicl)에 대한 다수의 이벤트 핸들러(배경색 변경, 폰트 변경)를 작성할 수 없음 (작성 시 마지막으로 해석된 이벤트 핸들러만 적용됨) : 두 번째 이벤트 ('30px' 적용 X)

---

• 3) 표준 이벤트 모델
  - W3C(HTML, CSS, JS 웹표준 지정 단체)에서 공식적으로 지정한 이벤트 모델(이벤트 동작 지정 방법)
  - 한 요소에 여러 이벤트 핸들러를 설정할 수 있음 → 고전 이벤트 모델의 단점 보완

<div id="test3">네모네모</div>

#test3{
   width: 200px;
   height: 200px;
   border: 1px solid black;
   cursor: pointer;
   background-color: darkcyan;
}

// 표준 이벤트 모델 확인하기
document.getElementById('test3').addEventListener("click", function(){

    // this : 이벤트가 발생한 요소
    // console.log(this.clientWidth); // 현재 요소의 너비(테두리 제외)

    // 현재 요소의 너비를 300px로 변경
    // this.style.width = '300px';
    this.style.width  = this.clientWidth + 20 + 'px';
})

// test3에 이미 click 이벤트에 대한 동작이 존재하는데 중복해서 적용 가능
document.getElementById('test3').addEventListener('click',function(){
    this.style.height = this.clientHeight + 20 + 'px';
})

See the Pen 24-12-25 js review21 by Namu (@Namu-the-sans) on CodePen.

---

• 이벤트 복습 문제
  - 색상을 영어로 입력한 후, 변경 버튼을 클릭하면
    아이디가 div1인 요소의 배경색이 변경되도록 하시오.

<div id="div1"></div>
<input type="text" id="input1">

<button id="changeBtn1">변경</button>

#div1{
   width: 100px;
   height: 100px;
   border: 1px solid black;
}

/* 복습 문제 */
document.getElementById('changeBtn1').addEventListener('click',function(){

    const div1 = document.getElementById('div1');
    const input1 = document.getElementById('input1');

    // input1에 작성된 값 얻어오기
    const bgColor = input1.value;

    // div1의 배경색 변경
    div1.style.backgroundColor = bgColor;
})

---

/* 복습 문제 */
document.getElementById('changeBtn1').addEventListener('click',function(){

   document.getElementById('div1').style.backgroundColor = document.getElementById('input1').value;

})

See the Pen 24-12-25 js review22 by Namu (@Namu-the-sans) on CodePen.

---

/* 복습 문제 응용 */
// 아이디가 input1인 요소에 입력된 값이 변경되었을 때 
// 해당 값으로 배경색 변경 후 값 초기화
document.getElementById('input1').addEventListener('change', function(){

/* change 이벤트
text 관련 input 태그는
입력된 값이 변할 때 change라고 하지 않고!
입력이 완료된 후 포커스를 잃거나 엔터를 눌렀을 때,
입력된 값이 이전과 다를 경우 change 이벤트가 발생한 걸로 인식함
*/

   document.getElementById('div1').style.backgroundColor = this.value;
   // this : 이벤트가 발생한 요소(#input1)
   
   this.value = ''; // input1에 작성된 값 초기화
})

See the Pen 24-12-25 js review23 by Namu (@Namu-the-sans) on CodePen.

---

▶ HTML 요소 기본 이벤트 제거

• a 태그 기본 이벤트 제거

<a href="https://www.naver.com" id="moveNaver">네이버로 이동</a>

// a태그 기본 이벤트 제거
document.getElementById('moveNaver').addEventListener('click',function(e){

    // 매개변수 e 또는 event = 이벤트 발생 객체
    // (이벤트와 관련된 정보가 담겨 있는 객체)

    e.preventDefault(); // HTML 요소가 가지고 있는 기본 이벤트를 막음(제거)

    // prevent : 막다, 방지하다, 예방하다
    // Default : 기본 / 기본값
})

See the Pen 24-12-25 js review24 by Namu (@Namu-the-sans) on CodePen.

---

• form 태그 기본 이벤트 제거
  - 내부에서 submit 버튼이 클릭되면 action 경로로 제출
  
  - 방법 1. submit 버튼을 사용 안 하는 방법

<form action="https://www.naver.com" name="testForm1">
   "제출" 이라고 입력되었을 때만 버튼이 submit으로 동작
   입력 : <input type="text" name="in1" id="in1">

   <button type="button" id="testBtn1">제출하기</button>
</form>

// 방법 1. submit 버튼 사용 안 하는 방법
document.getElementById('testBtn1').addEventListener('click',function(){
    
    // 아이디가 in1인 요소에 입력된 값 얻어오기
    const in1 = document.getElementById('in1').value;
    
    // 아이디가 in1인 요소에 작성된 값이 "제출"일 경우 이름이 testForm1인 form 태그를 submit
    if(in1 == "제출"){

        // ★★ form태그의 name 속성이 있을 경우 직접 선택 가능
        // document.form태그의 name 속성 값
        
        document.testForm1.submit();

        // ★★ form요소.submit() : form 요소 제출 함수
    }
})

See the Pen 24-12-25 js review25 by Namu (@Namu-the-sans) on CodePen.

   - 방법 2. onsubmit을 이용해서 form 태그가 제출되는 것을 막는 방법
   ※ onsubmit : form 태그가 제출되었을 때 → 제출하기 버튼이 클릭되었을 때를 의미
       onsubmit = "return false" → submit을 막는 방법

<form action="01_JS 개요.html" onsubmit="return checkIn2()">
   "제출" 이라고 입력되었을 때만 버튼이 submit으로 동작
   입력 : <input type="text" name="in2" id="in2">

   <button type="submit" id="testBtn2">제출하기</button>
</form>

// 방법 2. onsubmit을 이용해서 form 태그 제출 막기
function checkIn2(){

    // 아이디가 in2인 요소에 "제출"이 입력된 경우에만 submit(return true) 수행
    const in2 = document.getElementById('in2').value;
    
    if(in2 == "제출"){
        return true;
    } else{
        return false;
    }
}

See the Pen 24-12-25 js review26 by Namu (@Namu-the-sans) on CodePen.

---

• ★★JavaScript 코드를 body 태그의 마지막에 작성하는 이유 ★★
  
  1. 고전 / 표준 이벤트 모델 방식의 코드 수행을 위해서.
      (HTML 요소를 먼저 랜더링 → JS 코드 해석)
  
  2. head 태그에 용량이 큰 JS 코드를 추가하면 페이지 로딩 시간이 길어지게 됨.
  
  → body 태그의 마지막으로 옮기면 화면 랜더링 후 JS 코드가 나중에 해석됨