[자바스크립트] - 이벤트 처리 방식 총 정리

이벤트의 처리 방식

 

그동안 예제에서 사용하던 방법은 html이 주인이 되어 자바스크립트의 함수를 호출해서 사용하는 베이직한 방식이다. 

하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리를 하게 만들 수 있다. 

중요한 점은 이벤트 처리를 HTML이 하게 만드는가, 혹은 자바스크립트가 처리하게 만드는가를 중심을 잡고 코드를 처리해야 한다. 

---

 < 이벤트 처리 방식 1 > - 웹 요소를 클릭했을 때 실행할 함수를 연결하려면- 

 

웹 요소를 클릭했을 때 실행할 함수를 연결하려면, 아래 기본형을 사용.

이 방식은 자바스크립트가 주인이 되어 이벤트를 처리함. 

[기본형]

요소명.on이벤트명 = 함수명;

function 함수명(){ 이벤트 자바스크립트 코드; }

ex) document.querySelector('#아이디명').onclick = 함수명;

요소명에 태그를 자바스크립트가 가져와서 처리한다.  도큐먼트쿼리셀렉터나 변수 안에 태그를 담아서 요소명에 적는다. 
이 방식은 뒤에 ( )붙이지 않는다.

요소를 선택하자마자 이벤트를 실행시키는 방식

---

 < 이벤트 처리 방식 2 > - 여러 태그에 동일한 이벤트를 적용하고 싶을 때  

 

이벤트를 적용하고 싶은 태그를 변수에 담아두었다가 이벤트를 연결하는 방식. 

이 방식은 여러 태그에 동일한 이벤트를 적용하고 싶을 때 많이 사용

여기는 변하지 않기 때문에 const를 쓰는 게 일반적이다. 

[기본형]

const 변수명1 = 요소선택;
const 변수명2 = 요소선택;
const 변수명3 = 요소선택;

function 함수명(){ 이벤트 자바스크립트 코드; }

변수명1.on이벤트명 = 함수명;
변수명2.on이벤트명 = 함수명;
변수명3.on이벤트명 = 함수명;

ex) const tag1 = document.querySelector('#아이디명');
    const tag2 = document.querySelector('#아이디명');
 
 function 함수명(){ 이벤트 자바스크립트 코드; }
 
 tag1.onclick = 함수명;
 tag1.onmouseover = 함수명;

---

 < 이벤트 처리 방식 3 > - 태그에 직접 원하는 이벤트를 적용하는 방식  

 

태그에 직접 원하는 이벤트를 적용하는 방식.

이 방식은 익명함수를 사용하고 보통 해당 태그만 이 이벤트를 사용해야할 때  많이 쓰는 방식

[기본형]

요소명.on이벤트명 = function(){ 이벤트 자바스크립트 코드; };

ex) document.querySelector('#아이디명').onclick = function(){ 
	이벤트 자바스크립트 코드; 
   };

재사용하지않고 하나의 태그만 가지고 있을 기능. 요소를 선택해서 바로 기능을 넣은 것. 함수를 따로 분리한게 아니다. 

다른 애들은 이 기능을 가져다 쓸 수 없다. 함수가 바로 연결되어있다.