인라인 이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Basics</title>
</head>
<body>
<h1>Events</h1>
<!--인라인 이벤트-->
<button onclick="alert('you clicked me!'); alert('stop clicking')">Click Me!</button>
</body>
</html>이렇게 따로 자바스크립트가 없이 html안에서 인라인 이벤트 를 적용하는 방법인데, html에 자바스크립트 내용을 넣는것도 깔끔하지 못하고 너무 길어서 가독성도 좋지 못한 코드이다.
일단 누를 곳에 onclick넣어 주고 alert로 띄울 메세지를 ('') 안에 입력하는 방식이다.
저렇게하면 클릭할때마다 위에 창이 뜬다.
적을 알라 연습
인라인 이벤트 처리기를 작성해 보도록 요청하고 있습니다. 이는 제가 권장하는 방법은 아니지만, 이 방법이 여러분을 얼마나 성가시게 하는 것인지 체감하는 기회가 되기를 바랍니다.
index.html을 보면 하나의 'h1' 요소와 하나의 'button'요소가 있습니다. html에 직접 두 개의 인라인 클릭 처리기를 추가하세요.
h1을 클릭하면 "boo"가 출력*되어야 합니다.
button을 클릭하면 "clicked"가 출력되어야 합니다.
- "출력"= console.log('something here');
<!DOCTYPE html>
<head>
<title>Inline Events</title>
<!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
<script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1 onclick=console.log("boo");>Inline Events Suck...</h1>
<button onclick=console.log("clicked"); id="btn">Click Me</button>
</body>
</html>
그럼 이렇게 누를때 출력이 잘 되는 모습을 볼 수 있다.
javascript로 클릭을 해보자!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Basics</title>
</head>
<body>
<h1>Events</h1>
<button onclick="alert('you clicked me!'); alert('stop clicking')">Click Me!</button>
<button id="v2">Click Me (2nd version)</button>
<script src="app.js"></script>
</body>
</html>const btn = document.querySelector('#v2');
btn.onclick = function () {
console.log("YOU CLICKED ME!")
console.log("I HOPE IT WORKED!!")
}
function scream() {
console.log("AAAAAHHHHH");
console.log("STOP TOUCHING ME!")
}
btn.onmouseenter = scream;이런식으로 버튼을 document.querySelector()로 가져와주고 btn에 onclick을 주고 console.log()해주면 버튼을 누를때마다 콘솔창에 YOU CLICKED ME!,I HOPE IT WORKED!!가 출력이 된다.
💁♀️html에 인라인 이벤트를 주는것보다 훨씬 좋다.
그리고 onmaouseenter라는 이벤트는 마우스가 그 안으로 들어가면 작동하는데, 저런식으로 주면 마우스가 버튼안에 들어가면AAAAAHHHHH,STOP TOUCHING ME가 출력이 된다.
addEventListener
이 전에 두가지 방법보다 훨씬 좋은 방법이다. 이 방법으로 이벤트를 넣는게 가장 좋다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Basics</title>
</head>
<body>
<h1>Events</h1>
<button id="v3">Click Me (3rd version)</button>
<script src="app.js"></script>
</body>
</html>const btn3 = document.querySelector('#v3');
btn3.addEventListener('click', function () {
alert("CLICKED!");
})btn3로 변수로 선언해주고 (안그러면 너무 길고 재사용에 가독성이 좋지않다) addEventListener()를 사용해줬다. 클릭이 아니더라도 이벤트 이름을 다른걸 넣어주고 뒤에 콜백함수를 입력해주면 그대로 이벤트가 적용이 된다.
👀클릭 외에도 다른 이벤트 들을 찾아보았다 !
마우스 이벤트
click: 마우스 버튼을 클릭할 때
dblclick: 마우스 버튼을 더블 클릭할 때
mouseover: 마우스가 요소 위로 올라갈 때
mouseout: 마우스가 요소를 떠날 때
mousemove: 마우스를 움직일 때
mousedown: 마우스 버튼을 누를 때
mouseup: 마우스 버튼을 뗄 때
키보드 이벤트
keydown: 키를 눌렀을 때
keyup: 키를 뗐을 때
keypress: 문자를 입력할 때 (이벤트는 비표준으로, keydown과 keyup 사용 권장)
폼 이벤트
submit: 폼이 제출될 때
change: 입력 요소의 값이 변경될 때
input: 입력 요소에 값이 입력될 때
focus: 요소에 포커스가 맞춰질 때
blur: 요소에서 포커스가 벗어날 때
문서 및 창 이벤트
load: 페이지나 리소스가 로드될 때
resize: 브라우저 창의 크기가 조정될 때
scroll: 스크롤이 발생할 때
unload: 페이지가 떠날 때
beforeunload: 페이지를 떠나기 전에 사용자에게 확인을 요청할 때
기타 이벤트
contextmenu: 마우스 오른쪽 버튼 클릭 시 컨텍스트 메뉴가 열릴 때
animationstart, animationend, animationiteration: CSS 애니메이션 관련 이벤트
transitionend: CSS 전환이 끝날 때
❗그리고 걷기반 수업에서 배웠듯이,
함수를 사용하는 이유 1.재사용 2.추상성 때문인데
함수를 선언하고 그걸 이벤트 적용에 재사용하는 예를 한번 보자 !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Basics</title>
</head>
<body>
<h1>Events</h1>
<button id="tas">Twist & Shout</button>
<script src="app.js"></script>
</body>
</html>function twist() {
console.log("TWIST!")
}
function shout() {
console.log("SHOUT!")
}
const tasButton = document.querySelector('#tas');
tasButton.addEventListener('click', twist)
tasButton.addEventListener('click', shout)
//만약에 tasButton.addEventListener('click', twist, {once:true})라고
//적어주게되면 한번만 이벤트가 적용되고 addEventListener가 사라진다.
//removeEventListener가 있지만, 그건 나중에 다시 공부하겠다 !클릭 이벤트 연습
addEventListener를 사용하는 연습을 해보겠습니다. 각각 'hello'와 'goodbye'라는 id를 갖는 두 개의 버튼을 제공해 드렸습니다. 목표는 각 버튼에 클릭 리스너(click listener)를 추가하는 것입니다.
hello 버튼을 클릭하면 "hello"라는 문구가 console.log 메서드를 통해 콘솔에 출력되어야 하고
goodbye 버튼을 클릭하면 "goodbye"라는 문구가 console.log 메서드를 통해 콘솔에 출력되어야 합니다.
<!DOCTYPE html>
<head>
<title>ClasList</title>
<!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
<script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>Click These Buttons</h1>
<p>And Prepare To Have Your Mind Blown</p>
<button id="hello">Hello</button>
<button id="goodbye">Goodbye</button>
</body>
</html>const hello = document.querySelector('#hello');
const bye = document.querySelector('#goodbye');
hello.addEventListener("click", function () {
console.log("hello");
})
bye.addEventListener("click", function () {
console.log("goodbye");
})너무 기니까 변수로 선언해주고 변수에다가 addEventListener() 아주 간단한 문제!
랜덤 컬러 연습하기
버튼을 누르면 랜덤으로 색이 변한다. 일단 버튼을 document.querySelector()를 통해 가져와주고, 그 버튼에 addEventListener()!!
그리고 body에 접근하기 위해서 const newColor = makeRandColor(); document.body.style.backgroundColor = newColor;해줬다.
그리고 임의의 색을 랜덤으로 주려면 rgb의 0~255개의 숫자를 이용해야한다.
const makeRandColor = () => {
const r = Math.floor(Math.random() 255);
const g = Math.floor(Math.random() 255);
const b = Math.floor(Math.random() * 255);
return rgb(${r}, ${g}, ${b});
}
이렇게 Math.random()을 이용하면 r,g,b를 랜덤으로 가져 올 수있고, 리턴할때 순서대로 해준다.그러고 나서 색이 바뀔때마다 h1에 무슨 색인지 나타내기 위해서 h1.innerText = newColor;해주면 완료 !!
🤔 내가 이벤트를 적용 할 때 주의해야 할 점
- 함수를 재사용 할 때 함수 이름 네이밍 잘해야 하고
- document.querySelector()로 가져올 때 id/class 구분 잘해야 한다
