JS EVENT(이벤트)

📝 계산기만들기, 이벤트, 정규표현식 후 세미프로젝트 작업
#230224

📌 이벤트(Event)

이벤트 : 브라우저에서 동작, 행위

ex) click, keydown, keypress, keyup,
mouseover, mouseout, mouseleave, mouseenter,
change, submit......

이벤트리스너(Event Listener)

이벤트가 발생하는 것을 대기하고 있다가
이벤트 발생이 감지되면 연결된 기능(함수)를 수행함
ex) onclick, onkeyup, onchange, onsubmit ,...
(on으로 시작하는건 다 이벤트리스너임)

이벤트 핸들러(Event Handler)

이벤트 리스너에 연결된 기능(함수)
이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수

🏷️ 인라인 이벤트 모델

요소 내부에 이벤트 리스너, 핸들러 작성하는 방법

on 이벤트명="함수명()"  형태로 작성

[예제] 인라인 이벤트 모델 확인하기

 <button onclick="fnTest1(this)">인라인 이벤트 모델 확인용 버튼</button>

// onclick 은 이벤트 리스너
// fnTest1(this)는 이벤트 핸들러라고 부름
// this는 위의 문장 전체를 의미함.
----------------------------------------------------------------------
function fnTest1(btn) {
    btn.style.color = "white";
    btn.style.backgroundColor = "black";
    btn.style.cursor = "pointer";
}

🏷️ 고전 이벤트 모델

요소가 가지고 있는 이벤트 속성(이벤트 리스너)에
이벤트 핸들러를 직접 연결하는 방법

<button id="btn1">고전 이벤트 모델 확인</button>
--------------------------------------------------------
document.getElementById("btn1").onclick = function() {
    alert('버튼 클릭됨');

✔️ 고전/표준 이벤트모델 장점

1. 이벤트 제거가 가능함
2. 하나 요소에 여러 이벤트를 계속 추가 할 수 있음

[예시1]
//요소의 속성 중 on이벤트명 속성에 함수대신 null을 대입하여
//이벤트 삭제 (변수에 값을 새로 대입하여 덮어쓰기하는 원리)

<button id="btn1">고전 이벤트 모델 확인</button>
------------------------------------------------------------
	document.getElementById("btn1").onclick = function() {
    alert('버튼 클릭됨');

   		document.getElementById("btn1").onclick = null;
	}

[예시2] 하나 요소에 여러 이벤트를 계속 추가하기

document.getElementById("btn1").onmouseover = function() {
    // 마우스가 요소 위로 올라왔을 때
    document.getElementById("btn1").style.backgroundColor = 'red';
}

document.getElementById("btn1").onmouseout = function() {
    // 마우스가 요소 밖으로 나갔을 때
    document.getElementById("btn1").style.backgroundColor = 'yellow';
}

✔️ 고전/표준 이벤트모델 단점

한 요소에 동일한 이벤트 리스너에 대한 다수의 이벤트 핸들러를 작성할 수 없다.
     ex) 이벤트 리스너인 onclick 한테 함수 여러개 연결 안됨.

여러개를 넣어도 마지막으로 대입된 이벤트 핸들러(함수)만 적용
   →해결 방법: 표준 이벤트 모델을 사용
(해결방법의 의미 : onclick이라는 리스너가 있으면 여러가지 함수를 넣는다)

🏷️ 표준 이벤트 모델

• W3C에서 공식적으로 지정한 이벤트 모델 (실무에서 가장 많이 씀)
• 고전 이벤트 모델의 단점 보완 가능
  (한 요소에 여러 이벤트 핸들러를 설정할 수 있다.)

요소.addEventListener("이벤트명", 함수);  

 <button id="btn2">클릭해보세용</button>
---------------------------------------------
// 표준 이벤트 모델
const btn2 = document.getElementById("btn2");

//요소(btn2).addEventListener("이벤트명(click)", 함수(function) ); 
btn2.addEventListener("click", function() {
  
    // 이벤트 핸들러 내부에 작성된 this ==> 이벤트가 발생한 요소자체(btn2 버튼을 말함)
    console.log(this);

    this.style.backgroundColor = 'pink';
    this.style.border = "3px solid red";
    this.style.padding = "10px";
    this.style.display = "block";
})

// 고전이벤트 모델의 단점 보완한 것 확인해보기!
btn2.addEventListener("click", function() {
    this.style.fontSize = "20px";
    this.style.color = "red";
    this.style.fontWeight = "bold";
})

✔️ [연습] 배경색이 입력한 값으로 변하는박스 만들기

<div id="div1"></div>
<input type="text" id="input1">
-----------------------------------------------
//인풋에 들어온 value가 어떤 컬러값이 딱 맞았을 때 들어 올려면 key로?
//inputbox에 keyup이라는 이벤트가 실행되면 box색이 변함
document.getElementById("input1").addEventListener("keyup", function() {
// 박스 요소 선택
const div1 = document.getElementById("div1");

div1.style.backgroundColor = this.value;
//(this가 inputbox임 )  
})