EVENT
특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다. 다양한 이벤트가 존재하며, 자바스크립트에서는 이벤트를 감지하고, 그에 맞는 결과를 노출시키도록 프로그래밍 해야한다.
- MouseEvent:
click
contextmenu
mouseover과mouseout
mousedown과mouseup
dblclick,mousemove,mousewheel- KeyboardEvent:
keydown,keyup: 키보드 버튼을 누르거나 뗄 때
keypress: 키보드를 눌렀을 때, 한 번만 실행- Form events:
submit: 사용자가 form을 제출할 때
focus: 사용자가 input과 같은 요소에 포커스 할 때 발생
blur,change- Window events:
scroll,resize,hashchange,load,unload
❗️요약
이벤트 핸들러는 3가지 방법으로 할당할 수 있다.
- HTML 속성:.
- DOM 프로퍼티: elem.onclick = function.
- Method: elem.addEventListener(event, handler[, phase])로 핸들러를 추가하고, removeEventListener 로 핸들러를 제거함
HTML 속성을 이용한 이벤트 핸들러 할당은 자주 쓰이지 않는다. HTML 태그 중간에 자바스크립트가 들어가 있으면 어색하기 때문이다. 긴 코드를 끼워 넣는 게 불가능한 점도 이유 중 하나.
DOM 프로퍼티를 사용한 방법은 괜찮지만 복수의 핸들러 할당이 불가능하다는 단점이 있다. 여러 상황에서 이런 제약이 큰 단점이 되진 않다!
메서드를 사용하는 방법은 가장 유연하지만, 코드는 가장 길다.
form, input 하나하나 element node 객체이다. HTML에 있던 것들이 메모리상에 올라가고 자바스크립트가 사용할 수 있는 재료가 되고 이것들을 이용할 수 있게 됨.
이것을 이용하는 예제를 id를 부여함으로써 이용해보자!
1. HTML안에서의 이벤트
<input type="button" value="클릭해주세요" onclick="alert('클릭!')">2. HTML과 JavaScript를 함께 사용하는 방법
2-1. onclick에 함수호출
-html의 onclick에 담을 내용이 너무 길고 복잡할 경우, 함수를 넣어줘서 script에 따로 빼준다
<input type="button" value="토끼를 세봅시다" onclick="countRabbits()">
//"함수명();" quotation mark 끝나기 전 semi-colon꼭 넣어줘야한다!
<script>
function countRabbits(){
for(let i=1; i<=3; i++){
alert('토끼'+i+'마리');
}
}
</script>
2-2.
<input type="button" value="클릭" id="btnPrint" onclick="f1();"><br/>
<span id="span1" onclick="alert('Hello');">스팬</span>
<script>
function f1(){
var x = prompt("x값을 넣어라",0);
var y = prompt("y값을 넣어라",0);
x = parseInt(x);
y = parseInt(y);
btnPrint.value= x+y; //value값 클릭은 x+y의 결과값으로 바뀜
span1.innerText = x+y; //span tag는 value값을 갖고 있지 않기때문에 innerText를 써줌
}
</script>2-3. 더욱 더 간단하게 만들어주기
HTML에서 onclick을 빼고, Script에 .onlick을 넣어주기
<input type="button" value="클릭" id="btnPrint"><br/>
<span id="span1" onclick="alert('Hello');">스팬</span>
<script>
function f1(){
var x = prompt("x값을 넣어라",0);
var y = prompt("y값을 넣어라",0);
x = parseInt(x);
y = parseInt(y);
btnPrint.onclick = f1; //f1()는 함수를 호출하는 것, 결과값을 대입하는 것이기 때문에 script 내에서 함수를 대입할 때는 소괄호를 빼줘야함
</script>2-4. 이름을 호출할 일이 없고, 함수가 필요한 것일 뿐이므로
함수를 동시에 적어줘도 됨. event 함수를 바로 대입. 명명할 이유가 없는 함수.
<input type="button" id="ryan" value="클릭해 주세요.">
<script>
ryan.onclick=function(){ //id값을 가져옴
alert('클릭');
};
</script>
document.getElementById 의 유래
<input type = "button" value="출력" id=btn-Print>
html에서 camel 표기법은 원래 안됨.
btnPrint(x)
btn-print(o)
<script>
하지만 script에서 - 표기법은 안됨.
btn-print.onclick = f1;(x)
btnPrint.onclick = f1;(x)
</script>
이런 문제들 때문에
var btnPrint = document.getElementBy("btn-print")
자바스크립트의 이름에 맞게 btnPrint를 지정해주고
btnPrint라는 이름의 element를 다오. document- 를 이용하여 꺼내쓰는 것이 정상적인 방법
eventhandler
이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러(Handler)를 할당해야함. 핸들러는 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것
document.getElementById(아이디).onclick = function(){실행할 코드}
: 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함
addEventListener
EventTarget.addEventListener
EventTarget.removeEventListener..
다 EventTarget의 API였다!
특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜준다
element.addEventListener(event type, functiontocall)
.js파일을 두개를 각각 추가해서 실행하면 첫번째 js속의 function만 실행되어버림. test2의 function은 초기화가 되어버림
이렇게, 이벤트를 누적하고 바인딩하고 싶을 때
핸들러를 여러개 할당하기 위한 것
window.onload = function(){alert("test1);}
window.onload = function(){alert("test2);}
->
window.addEventListener("load",function(){alert("test1");
window.addEventListener("load",function(){alert("test2");
이렇게 해주면 누적해서 사용할 수 있게 되는 것
DOM요소의 내용 변경
HTML 요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용하는 것
<p id="text">이 문장을 바꿀 것입니다!</p>
<script>
let change = document.getElementById("text");
change.innerHTML = "이 문장으로 바꼈다";
</script>
