-
[JavaScript] 이벤트 리스너 만들기개발 프로세스/Front-end 2021. 6. 17. 13:26
이벤트
이벤트는 사용자가 마우스나 키보드로 입력하거나 체크 박스를 선택하는 등의 행위를 브라우저가 자바스크립트 코드에게 알려주는 통지이다. 이 외에도 다른 태스크로부터 메시지가 오거나 네트워크 연결이 오는 경우에도 이벤트가 발생한다.
이벤트 리스너
이벤트를 처리하기 위해 만든 자바스크립트 코드.
이벤트 리스너 만들기
- HTML 태그 내에 작성
- DOM 객체의 이벤트 리스너 프로퍼티에 작성
- DOM 객체의 addEventListener() 메소드 이용
HTML 태그 내에 이벤트 리스너 작성
<p onmouseover="this.style.backgroundColor='orchid'" onmouseout="this.style.backgroundColor='white'"> 마우스 올리면 orchid 색으로 변경 </p>/* Script */ function calculate() { var exp = document.getElementById("exp"); var result = document.getElementById("result"); result.value = eval(exp.value); }<form> 식 <input type="text" id="exp" value=""><br> 값 <input type="text" id ="result"> <input type="button" value=" 계산 " onclick="calculate()"> </form>DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록
over() 함수를 객체 p의 onmouseover 리스너로 등록할 때는 괄호( )를 제외하고 함수의 이름만 등록해야한다.
/* Script */ var p; function init() { // 문서가 완전히 로드되었을 때 호출 p = document.getElementById("p"); p.onmouseover = over; // over() 함수를 onmouseover 리스너로 등록 p.onmouseout = out; // out() 함수를 onmouseout 리스너로 등록 } function over() { p.style.backgroundColor="orchid"; } function out() { p.style.backgroundColor="white"; }<body onload="init()"> <h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3> <hr> <p id="p">마우스 올리면 orchid 색으로 변경</p> </body>DOM객체의 addEventListener() 메소드 활용
addEventListner(eventName, listener[, useCapture])- eventName : 이벤트 타입을 나타내는 문자열. on 없이 이벤트 이름만 사용
- listener : 이벤트 리스너로 등록할 함수 이름
- useCapture : true이면 이벤트 흐름 중 '캡쳐 단계'에서 실행될 리스너 등록. false이면 '버블 단계'에서 실행될 리스너 등록. 생략 가능하며 디폴트는 false.
/* Script */ var p; function init() { // 문서가 완전히 로드되었을 때 호출 p = document.getElementById("p"); p.addEventListener("mouseover", over); // 이벤트 리스너 등록 p.addEventListener("mouseout", out); // 이벤트 리스너 등록 } function over() { p.style.backgroundColor="orchid"; } function out() { p.style.backgroundColor="white"; }<body onload="init()"> <h3>addEventListener()를 이용한 리스너 등록</h3> <hr> <p id="p">마우스 올리면 orchid 색으로 변경</p> </body><참고 교재>
명품 웹 프로그래밍
브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가
webprogramming.co.kr
'개발 프로세스 > Front-end' 카테고리의 다른 글
[JavaScript] 문서와 이미지 로딩, onload (0) 2021.06.17 [JavaScript] 마우스 핸들링 (0) 2021.06.17 [JavaScript] HTML 문서의 동적 구성 (0) 2021.06.16 [JavaScript] 브라우저 제공 내장 객체 : DOM 트리의 최상위 객체, document (0) 2021.06.15 [JavaScript] 브라우저 제공 내장 객체 : DOM 객체 다루기 (0) 2021.06.14