2021-01-19 HTML 이벤트

2021-01-19
이벤트
- 마우스 클릭 등 사용자의 입력행위, 문서나 브라우저의 상태 변화를 브라우저가 자바스크립트 코드에게 알리는 통지이다.

이벤트 리스너
	- 발생한 이벤트에 적절히 대처하기 위해 작성된 자바스크립트 코드
	- 이벤트 리스너의 이름은 이벤트 이름 앞에 on을 붙인다.

이벤트 리스너 만들기
	- 이벤트 리스너 작성 방법 3가지
		- HTML 태그 내에 작성
		- DOM 객체의 이벤트 리스너 프로퍼티에 적성
		- DOM 객체의 addEventListenr() 메소드 이용

	- HTML 태그 내에 이벤트 리스너 작성
		- 태그 안에 바로 작성.
		- <p onmouseover = "this.style.backgroundColor = 'orchid'">

	- DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록
		- function over(){} 작성
		- var p = document.getElementById("p");
		  p.onmouseover = over;
		- 함수의 이름만 등록해야 한다.
		- 프로퍼티이기에 함수의 기능(함수())이 아닌 함수 자체를 적는다.

	- DOM 객체의 addEventListener() 메소드 활용
		- wgc 의 표준 방법으로서 DOM 객체의 addEventListener()메소드로 리스너를 등록할 수 있다
		- 여러 함수 중복 등록 가능.
		- p.addEventListener("mouseover", over);

	- 익명 함수로 이벤트 리스너 작성
		- 함수의 이름 없이 필요한 곳에 함수의 코드를 바로 작성하는 방법
		- p.onmouseover = function(){this.style.backgroundColor = "orchid"};

이벤트 객체
	- 브라우저는 발생한 이벤트에 관련된 다양한 정보를 담은 이벤트 객체를 만들어 '이벤트 리스너'에 전달한다.
	- 이벤트 객체는 처리되고 나면 소멸된다.
	- 이벤트는 연이어 발생할 수 있지만, 브라우저는 한개의 이벤트를 완전히 처리한 후 순서대로 처리. 1번에 하나만.

	이벤트 객체 전달 받기
		- 이름을 가진 이벤트 리스너 함수의 경우
			- function f(e){
				
			}
			obj.onclick = f;
		- 익명 함수의 경우
			obj.onclick = function(e){
			}
		- HTML 태그의 리스너 경우
			function f(e){
			}
			<button onclick="f(event)">

이벤트 객체에 들어있는 정보
	- 이벤트 타겟과 프로퍼티
		- target 프로퍼티는 이벤트 타겟 객체를 가리킨다.
		- 이벤트 타겟이란 이벤트를 유발시킨 객체 (이벤트 발생 객체)
		- currenTarget 프로퍼티는
			이벤트가 흘러가는 경로 상에 있는 DOM 객체 중 현재 이벤트 리스너를 실행하고 있는
			DOM 객체를 가리킨다.

이벤트의 디폴츠 행동 취소	preventDefault()
	- 디폴트 행동 : 버튼이 눌리는 것, 체크박스가 체크되는 것 등
	- 2가지 방법
		- 이벤트 리스너에서 false 리턴 시
			<a href = "http://www.naver.com onclick="return false">

		- <a href = "http://www.naver.com onclick="event.preventDefault()">