[JS] 바닐라 JS | #chall1) 여러가지 event 함수 만들어 사용해보기

🌈 미리 보기

---

처음으로 html에 js와 css를 연결해 보았다.

js에 html 요소를 불러오는 것은 querySelector 함수를 이용했다.

 

그리고 addEventListener 함수를 사용해보았다. 

event를 추가하는 법은 두 가지이다.

1. title.addEventListener("click",handleTitleClick);

이 방법을 사용하면 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문에 더욱 선호된다.

2. title.onclick = handleTitleClick;

이런 방법도 있다. (변수).on(eventname) = (함수이름); 으로 작성하면 된다.

이번 chall에는 모두 첫 번째 방법을 사용해보았다.

 

또한 event는 흔히 EventHandler라는 오브젝트명에 묶어서 정리한다. 그것이 훨씬 깔끔하기 때문이다.

 

오브젝트를 사용하지 않은 것과 오브젝트를 사용한 것 모두 작성해보았다.

결과는 같으나 소스 코드에 차이가 있다. 어떤 것이 더 보기 좋은지 비교해보면 오브젝트의 유용함을 알 수 있을 것이다.

 

⌨️ 소스

1. 오브젝트 사용 X

 

2. superEventHandler 이름의 오브젝트 사용 O

 

💻 결과

앞서 말했다시피 결과는 같은 것을 알 수 있다.

하지만 object로 event를 묶어 관리하니까 코드의 효율성과 가시성이 높아지는 것을 알 수 있다.

 

💬 특징

✔️ 여러가지 이벤트: contextmenu

우클릭 감지

✔️ 여러가지 이벤트: mouseenter

cursor의 hover 감지

✔️ 여러가지 이벤트: mouseleave

cursor의 사라짐 감지

✔️ 여러가지 이벤트: resize

window의 size 변화 감지

 

 

🎈 느낀 점

object 문법이 아직은 좀 헷갈려서 사용할 때 다른 코드를 좀 참고했다. 대표적인 객체지향 언어인 파이썬의 딕셔너리 기능과 굉장히 비슷한 것 같다. (js는 함수도 객체가 된다는 것이 특징이다. 파이썬도 같은지는 모르겠다.)

 

또한 on(이벤트이름) 이 문법이 굉장히 특이하다고 생각했다. 그동안 배운 문법들은 변수의 이름과 어떠한 접두사?를 붙이는 일이 없었던 것 같다. 즉, 변수의 이름이 파괴되면 안됐다. 그런데 js는 특이하게 변수의 이름에 조작을 좀 가해도 잘 알아듣나보다. 참 유동적이고 유연한 언어다. 

 

그리고 event이름에 ""을 치는 것도 신기했다. 다른 언어라면 그냥 따옴표 없이 이름을 입력하지 않을까? 그 이유를 아무것도 모르지만 추정해보자면 브라우저에 object 형태로 event명이 탑재되어 있어서 그것을 또 불러와야 하기 때문에 string으로 받아들이는 것 같다. 브라우저의 원리?를 알면 굉장히 당연하지만 모른다면 이질적으로 느껴질 문법이다.

 

다른 언어와 좀 결이 다르다는 게 느껴진다. JS에 대해 앞으로 더 알아보고 싶다!