[JavaScript] 이벤트

▶ Event
- 브라우저에서의 동작, 행위 (click, keydown, keyup, mouseove, drag, change, submit...)
- 참고 사이트 : https://www.w3schools.com/jsref/dom_obj_event.asp

▶ 이벤트 리스너 (Event Listener)
- 이벤트가 발생하는 것을 대기하고 있다가
  이벤트가 발생하는 것을 감지되면 연결된 기능(함수)를 수행하는것
  ex) onclick, onkeyup, onchange, onsubmit ... (on이벤트명)

▶ 이벤트 핸들러 (Event Handler)
 이벤트 리스너에 연결된 기능으로
 이벤트 발생시 수행하고자 하는 내용을 작성해둔 함수 (function)

 

▶ 이벤트 모델

1) 인라인 이벤트 모델 :

요소 내부에 이벤트를 작성하는 방법으로 on이벤트명 = 함수() 형태로 작성함.

// HTML - 버튼 클릭시(onclick) test1함수(매개변수this = 버튼) 호출
<button onclick="test1(this)">인라인 이벤트 모델 확인</button>

//JS
function test1(button){
	// 버튼 클릭시 배경색 검정, 글씨색 흰색으로
    button.style.backgroundColor = "black"; 
    button.style.color = "white";
}

 

2) 고전 이벤트 모델 :

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

인라인 모델처럼 html요소에 js코드가 포함되는 것이 아닌 script에만 이벤트관련 코드를 작성할 수 있다. 

 

[주의사항]

고전, 표준이벤트 모델은 랜더링된 HTML요소에 이벤트 관련 동작을 부여하는 코드

랜더링이 되지 않은 요소에는 이벤트 관련 동작을 추가할 수 없다.

- 원인 : HTML코드 해석순서

- 해결 : HTML코드 선 랜더링 후 JS 코드가 수행되도록 body태그 최하단에 script 연결문 작성하기!

 

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

// JS

// test2-1 : 고전 이벤트 모델 등록
// document.getElementById("test2-1").onclick = function(){ ... }
// function()은 익명함수 형태로, 이벤트 핸들러에 많이 사용한다 ~

document.getElementById("test2-1").onclick = function(){ 
    alert("고전 이벤트 모델로 출력된 대화상자 ~~~ ");
}

// test2-2 : test2-1 이벤트 제거
document.getElementById("test2-2").onclick = function(){
    document.getElementById("test2-1").onclick = null;
}

 

[고전 이벤트 모델의 단점]

한 요소에 동일한 이벤트리스너(onclick)에 대한 다수의 이벤트 핸들러 적용 불가
(마지막으로 해석된 이벤트 핸들러만 적용)
- 해결 : 표준 이벤트 모델 사용하기 ~~~~~

// html
<button id="test2-3">고전 이벤트 모델 단점</button>

// JS - 버튼 색 변경하기
// 방법1) 요소를 문서에서 찾아서 선택
document.getElementById("test2-3").onclick = function(){
	document.getElementById("test2-3").style.backgroundColor = "pink";
}

// 방법2) 매개변수 e또는 event 활용하기
// 이벤트 핸들러 매개변수에 e또는 event를 작성하는 경우, 
// 해당 이벤트와 관련된 모든 정보가 담긴 이벤트 객체가 반환된다. 
document.getElementById("test2-3").onclick = function(event){
    console.log(event); // 이벤트가 발생한 요소 확인
    event.target.style.backgroundColor = "pink";
}

// 방법3) this(==event.target) 이용
document.getElementById("test2-3").onclick = function(event){
    console.log(this); // 이벤트가 발생한 요소 확인
    this.style.backgroundColor = "pink";
}

// 동일한 이벤트 리스너("test2-3").onclick에 이벤트 핸들러 추가하기
// 이전에 작성한 이벤트 핸들러는 사라지고, 마지막에 작성한 이벤트 핸들러만 적용됨
document.getElementById("test2-3").onclick = function(){
    document.getElementById("test2-3").style.fontSize = "30px";
}

 

3) 표준 이벤트 모델 : 

W3C (HTML,CSS,JS등 웹 표준 재정 단체)에서 공식적으로 지정한 이벤트 모델 (이벤트 동작 지정방법(

한 요소에 여러 이벤트 핸들러를 설정할 수 있다. (고전 이벤트 모델 단점 보완)

 

- 작성방법 :  요소.addEventListender("click",   function(){})

                                                이벤트  이벤트핸들러

// 클릭할 때마다 가로길이를 20px씩 커지게 만드는 이벤트 핸들러
document.getElementById("test3").addEventListener("click",function(){
    
    console.log(this.clientWidth); 
    // this :  이벤트가 발생한 요소
    // this.clientWidth : 현재 요소의 너비 (테두리 제외)

	this.style.width = this.clientWidth + 20 + "px";
    // 클릭시마다 가로길이 20px씩 커짐
    
});

// 고전 이벤트 모델의 문제점 해결하기
// test3에 이미 click이벤트에 대한 동작이 존재하는데, 
// 여기에 이벤트핸들러 중복적용하기

// 클릭할 때마다 세로길이를 20px씩 커지게 만드는 이벤트 핸들러 중복적용
document.getElementById("test3").addEventListener("click", function(){
    
    this.style.height = this.clientHeight + 20 + "px";
    
})

// 클릭시마다 가로, 세로가 20px씩 커지는 이벤트핸들러가 적용되었다!!!

 

▶ 이벤트 제거

1) a태그 이벤트 제거

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

// JS
document.getElementById("moveNaver").addEventListener("click",function(e){
    
    e.preventDefault();
    // 매개변수 e 또는 event = 이벤트 발생 객체 (이벤트 관련정보 담겨있음)
    // html 요소가 가진 기본이벤트를 막음 (제거)

})

 

2) form 태그 기본 이벤트 제거

   방법1 - submit 버튼 사용안하는 방법 (표준 이벤트모델 사용)

// html
<form action="01_JS개요.html" name="testForm1">
    "제출"이라고 입력됐을때만 버튼이 submit으로 동작 <br>
    입력 : <input type="text" name="in1" id="in1">
    <button type="button" id="testBtn1">제출하기</button>
</form>
    
// JS
document.getElementById("testBtn1").addEventListener("click",function(){

    // in1 입력값 얻어오기
    const in1 = document.getElementById("in1").value;

	// 입력란에 제출 이라고 입력된 경우 버튼이 submit되도록 하기
    if(in1=="제출"){
        // 1. form태그의 name속성은 직접 선택가능 (document.form태그 name 속성값)
        // 2. form요소.submit() : form요소 제출 함수
        document.testForm1.submit();
    }

})

 

   방법2 - onsubmit을 이용해 form 태그가 제출되는 것을 막기 (인라인 이벤트모델 사용)

// HTML
// form태그가 제출되었을 때 (제출하기 버튼이 클릭되었을 때)
// onsubmit = "return false" -> submit을 막는 방법

<form action="01_JS개요.html" onsubmit = "return checkIn2()">

    "제출"이라고 입력됐을때만 버튼이 submit으로 동작 <br>

    입력 : <input type="text" name="in2" id="in2">
    <button type="submit">제출하기</button>
</form>

// JS
function checkIn2(){

    const in2 = document.getElementById("in2").value;

	// form 태그의 name속성은 별도의 선언없이 바로 지칭 가능 (in2)
    if(in2=="제출"){
        return true;
    }else{
        return false;
    }
    
}