출처https://wonism.github.io/what-is-decorator/
이벤트 발생시 특정 코드를 실행시키는 방법
1. html에다가 on이벤트라는 속성에 속성값으로 실행시킬 함수를 쓰기
2. html의 요소를 객체로 받아와서 자바스크립트에서 직접 객체의 onclick 속성에다가 함수를 넣어주기
let myDiv = document.querySelector('#box1');
myDiv.className = 'a';
myDiv.onclick = f;
3. html요소를 객체로 받아와서 자바스크립트에서 직접 addEventListener 함수를 사용하여 추가해준다
요소.addEventListener('이벤트이름', 함수);
삭제할때
요소.removeEventListener('이벤트이름', 함수);
01_이벤트.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트</title>
<style>
div{
border: 3px solid black;
padding: 5px;
}
</style>
</head>
<body>
<!-- 1번 방법(여러개의 함수 실행 가능)-->
<div onclick="f1(); f2();" id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="table">
<div id="box4">4</div>
<div id="box5">5</div>
<div id="box6">6</div>
</div>
<script>
let myDiv = document.querySelector('#table');
// 유사배열은 읽기전용으로 막아놨다(아래 쿼리 안먹힘)
myDiv.children[1] = document.createElement('p');
console.log([myDiv]);
const f1 = ()=>{
console.log('1번div가 클릭되었습니다');
}
// 1번째 방법 이벤트 삭제
let box1 = document.querySelector('#box1');
console.log([box1])
box1.onclick = null;
// 2번째 방법에 한번밖에 안쓸꺼라면 익명함수로 대입해줘도 된다
// const f2 = ()=>{
// console.log('2번div가 클림됨');
// }
// 2번째 방법(JS 에서 여러가지 함수를 대입을 하면 한개의 함수만 실행시켜줄 수 있다)
let box2 = document.querySelector('#box2');
console.log([box2])
box2.onclick = ()=>{
console.log('2번div가 클림됨');
// box2.onclick = f1; onclick : value = null; -> value = f1; 이 값을 넣어줘
// box2.onclick = f2; onclick : value = f2; 이 값을 넣어줘.라고 했으니 f2밖에 실행이 안된다.
// box2.onclick = null; 실행이 안된다(함수 삭제하고 싶을때)
// 똑같은 효과를 나타내고 싶을때? 함수로 만들어주면 된다
// const tmp = ()=>{
// f1();
// f2();
// }
// box2.onclick = tmp;
// }
// 일회용이면 익명함수로 사용(위랑 동일)
box2.onclick = ()=>{
f1();
f2();
}
// 3번째 방법(addEventListener 사용하면 여러개의 함수를 실행시켜줄 수 있다)
let box3 = document.querySelector('#box3');
// box3.addEventListener(어떤이벤트, 함수);
box3.addEventListener('click', f1);
box3.addEventListener('click', f2);
console.log([box3])
// 이벤트 삭제(어떤거? specify 해줘야한다)
box3.removeEventListener('click', f1);
</script>
</body>
</html>점점 어려워진다. 자바스크립트 너마저...🥲
Slowly but surely