Javascript - event

addEventListener

어떤 이벤트를 진행했을 때 함수 내부의 내용을 실행을 요청하는 함수입니다. (event 뜻 : 사건, 행사, 경기 ...)

 

요소.addEventListener(이벤트종류, function() {

    //이벤트가 일어났을 때 실행할 내용

  });

지정한 요소에 이벤트리스너 함수를 지정하고 이벤트의 종류를 사용자가 실행하면 그 안에 함수가 실행되는 느낌입니다.

 

이벤트 종류에는 많은 것들이 있는데, (그냥.. 사용하고 싶은 이벤트가 있으면 찾아서 하는 것으로... 뭔가 직접 사용해봐야 알 것 같다)

 

click : 클릭

contextmenu : 마우스 오른쪽 메뉴 선택 이벤트, 키보드

키보드 contextmenu

dblclick : 더블클릭

mousedown : 마우스를 눌렀을 때

mouseenter : 마우스가 요소 내부에 왔을 때

mouseleave : 마우스가 요소 외부로 나갈 때

mousemove : 요소에 마우스를 움직였을 때

mouseover : 요소에서 마우스가 내외부로 나가거나 들어갈 때

mouseout : 요소에 마우스가 아웃했을 때

mouseup : 마우스를 떼었을 때 이벤트가 발생

pointerlockchange : 입력 장치의 포인터가 잠기거나 잠금이 해제되면 발생

 

이벤트 리스너 함수를 사용하려면 html 파일과 연동이 되어야합니다.

따라서 queryselector 나 getelementsbyid 등 html 파일의 내용을 읽어와서 함수를 넣어버리면 화면에서 동작하게 만들 수 있습니다.

 

예를 들어 html 파일에 버튼 태그가 있고 class의 이름이 login_btn 이면

const button = document.gerElementsByClassName('login_btn') 이라고 해준다면

html 에 있는 버튼 태그에서 자바스크립트 기능을 구현할 수 있게 됩니다.

 

예를 들어,

button.addEventListener('click, function(){

alert('클릭!')}

이란 함수를 만들면 버튼을 눌렀을 때 클릭이라고 알림창이 뜨겠죠.

 

직접 확인해 보면서 자바스크립트 작성을 진행해보세요!~