클릭, hover, 무엇을 적기, enter를 누르는 것, 무엇을 입력하는 것, wifi에서 접속이 끊어졌을 때 등등이 다 event이다.
event를 listen해주는 javascript에게 listen할 event를 추가해준다는 의미이다.
물론 이 목록들을 포함하여 더 있다.
console.dir을 사용하여 여러 property들 중 event들을 찾아볼 수 있다.
property 앞에 on이 적혀있는 것들이 event이다.
사용 시에는 on을 제외하고 사용하면 된다.
event의 기본 행동(어떤 function이 발생 시 기본적으로 브라우저에서 생기는 행동)이 발생하지 않게 막는 함수이다.
ex)
form tag가 submit이 될 경우 새로고침이 되는데 이 함수를 발동시켜 막아준다.
대부분 이렇게 쓰인다. 코드 4~7번째 줄
여기서 정해준 title은 .hello 속 h1을 해당하는 것이다.
document.title은 head에 감싸져있는 title tag인 것으로 다르다.
코드를 설명하자면, document.querySelector를 사용하여 hello라는 class를 가진 값 속 h1 tag를 불러온뒤, function ()을 사용해 click 시 나타날 event를 만들어준다.
그 다음 addEventListener을 사용해 click이 된다면 funtion handleTitleClick가 실행되게 만들어주었다.
(11번을 클릭하니 나타난 모습인 것)
10번쨰 줄 코드에서 handleTitleClick 뒤에 ()를 넣으면 사용자가 클릭한 다음이 아닌 바로 실행이 되는 것이기 때문에 ()는 생략한 것이다.
마우스를 click me! 객체 위로 올렸다가 내렸다가를 6번 반복한 상태이다.
그냥 새로고침 시에는 Click me!
마우스를 올렸을 때는 Mouse is here!
마우스를 내렸을 때는 Mouse is gone!으로 잘 나타난다.
event는 이렇게 onclick 등으로 나타낼 수도 있는데, 22번째줄 코드처럼 addEventListener(event값, 주어질 값);을 선호하는 이유는 removeEventListener을 이용하여 event listener를 제거할 수 있기 때문이다.