[HTML/JavaScript] event 처리 / 효율적인 이벤트 처리

이벤트 처리하는 방법

 

비효율적

<button onclick="clicked()">눌러보셈</button>
<script>
	let clicked = function(){
		console.log("버튼을 눌렀네요?");
	};
</script>

이벤트를 처리할 때 이렇게 해도되지만 효율적인 방법은 아니다.

---

효율적

//id가 one인 요소에 "click" 이벤트가 일어나면 자동으로 호출되는 함수 등록
document.querySelector("#one").addEventListener("click",function(){
	console.log("두번째 버튼을 눌렀네요?");
});

이렇게 사용해야 효율적인 방법이다. 어떻게 나오는지 차근차근 알아보자.

이 방법을 쓴 예제보기 .... https://e-you.tistory.com/162

---

효율적이게 만드는 방법

document.querySelector("h1") type은 h1 object이다. (h1 참조값)

---

이 참조값만 있으면 h1오브젝트를 마음대로 조작할 수 있다.

---

 

a에 대입하면 a도 참조값을 받아서 a로 h1 조작이 가능하다.

---

이렇게 조작이 가능하다.

---

버튼이 여러개 있을 경우,

1) querySelectorAll

2) id

버튼이 여러개 있을경우 querySelectorAll을 사용하면 배열로 만들어진다.

---

 

배열을 접근해서 button2의 조작이 가능해진다.

 

---

querySelectorAll을 사용하지 않고 button2의 id를 사용하여 접근도 가능하다.

 

//id가 one인 요소에 "click" 이벤트가 일어나면 자동으로 호출되는 함수 등록
document.querySelector("#one").addEventListener("click",function(){
	console.log("두번째 버튼을 눌렀네요?");
});

id로 접근을 하여 addEventListener함수를 사용하면된다.

addEventListener은 이벤트와 함수를 파라미터로 가진다.

함수안에 실행하고 싶은 행위를 넣으면 된다.

---

이벤트에는 click말고도 여러가지가 있다.