JH 개발 블로그

e '이벤트 발생시 전달되는 정보'라는 뜻으로, 만약 '클릭'이라는 이벤트를 발생했을 시, 이벤트 객체는 해당 이벤트에 대한 상세한 정보를 담고 있다. 예) 마우스 위치, 마우스 버튼의 상태, 옵션키(연관된 ctrl, Alt, Shift 키) 등 이벤트 핸들러에 전달되는 이벤트 정보를 담고 있다. 이벤트 리스너 함수에 넘겨지는 인수(매개변수) 이다. 예제를 통해서 설명을 덧붙이겠습니다. 먼저 html과 css는 다음과 같습니다. Event menu 1 menu 2 menu 3 이어서 다음은 javascript입니다. 코드 해석 맨 마지막 줄 addEventListner 메서드를 통해 되도록 합니다. clickHandler 함수의 매개변수에 를 써주었습니다. 는 '이벤트 객체'로써 현재 클릭이라는 이벤트를..

javascript를 이용해서 '클릭하면 해당 버튼의 색깔을 바꾸는 실습'을 해볼 겁니다. 학습의 차원에서 해당 실습에 대한 여러 가지 방법을 나열하려고 합니다. 아래의 사진은 메뉴 버튼을 클릭했을 때 버튼의 색깔이 바뀌어지는 결과를 캡쳐해둔 것입니다. 방법 1) (스크립트를 중점적으로 보세요) Event menu 1 menu 2 menu 3 /* 메뉴 클릭 때 색깔 바꾸기 - 첫번째 방법(약간 비효율적) */ var menuLinks = document.querySelectorAll('.menu-link'); function clickMenuHandler() { /* onclickMenu와 같은 on____ , _____listener, _____handler들은 이벤트 리스너들이라고 할 수 있고, 보..

addEventLister의 정의 : 특정 이벤트가 발생했을 시 특정 함수를 실행할 수 있게 해주는 기능 -----> addEventListener가 특정 이벤트 발생 시 특정 함수를 실행시킨다면, removeEventListener는 등록된 이벤트리스너를 지우는 역할을 합니다. - 사용법 addEventListener var st = document.getElementById("stalker"); st.addEventListener('이벤트종류', '함수이름'); removeEventListener (이벤트리스너가 등록된 후)st.removeEventListener('이벤트종류', '함수이름'); 예제 change color 마우스만 올려도 색깔 바뀌는 버튼: green red 한번만 메세지 띄우는 버..