📚 [JavaScript] Event

📕 이벤트

1. 이벤트란?

웹 문서 영역 안에서 웹 브라우저나 사용자가 행하는 어떤 동작

예) 키보드에서 키를 누르는 것, 웹 브라우저에서 새로운 페이지를 불러오는 것

2) 이벤트 타입

발생한 이벤트의 종류를 나타내는 문자열

🎈 예제

<p onclick="changeText(this)">이 문자열을 클릭하면</p>
...
<script>
function changeText(element) {
    element.innerHTML = "문자열의 내용이 바뀐다";
} //문자열을 클릭하면 문자열의 내용이 바뀐다
</script>

📙 이벤트 리스너

웹 문서에서 이벤트가 발생하면 처리하는 함수

🎁 문법

<태그 on이벤트명 = "함수명">

🎈 예제

<ul>
	<li><a href="" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
    <li><a href="" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
    <li><a href="" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
</ul> //목록의 각 버튼을 클릭하면 알림 창을 표시한다

📒 이벤트 리스너 등록

1. 객체나 요소에 프로퍼티로 등록하는 방법

① 자바스크립트 코드에서 프로퍼티로 등록

🎈 예제

<script>
window.onload = function() { //HTML 문서가 로드될 때 실행
	var text = document.getElementById("text") //아이디가 text인 요소 선택
    text.innerHTML = "HTML 문서가 로드되었습니다.";
}
</script>

✔ 이벤트 타입별로 오직 하나의 이벤트 리스너만을 등록할 수 있다는 단점이 있다

② HTML 태그에 속성으로 등록

🎈 예제

<script>
<p onclick = "alert('문자열을 클릭했어요')">이 문자열을 클릭해보세요!</p>
//문자열을 클릭하면 문자열을 클릭했다는 알람이 뜬다
</script>

✔ HTML 코드에 자바스크립트 코드가 추가됨으로써 가독성이 안 좋아지고 유지보수도 힘들어진다는 단점이 있다

2. 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법

① addEventListener()

거의 모든 브라우저에서 지원하는 이벤트 리스너 등록을 위한 메소드

🎁 문법

대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)

이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달한다
실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달한다
이벤트 전파 방식 : false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파한다

🎈 예제

<script>
var showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택한다
showBtn.addEventListener("click", showText);  // 선택한 요소에 click 이벤트 리스너를 등록한다
function showText() {
    document.getElementById("text").innerHTML = "텍스트가 나타났다";
} //버튼을 누르면 텍스트가 나타난다.
</script>

② attachEvent()

3. 여러 개의 이벤트 리스너 등록

addEventListener() 메소드를 사용하면 하나의 객체에 여러 개의 이벤트 리스너를 등록할 수 있다

🎈 예제

<script>
var showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택한다
btn.addEventListener("click", clickBtn);  // 선택한 요소에 click 이벤트 리스너를 등록한다
btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 리스너를 등록한다
btn.addEventListener("mouseout", mouseoutBtn);   // 선택한 요소에 mouseout 이벤트 리스너를 등록한다
function clickBtn() {
    document.getElementById("text").innerHTML = "버튼이 클릭됐어요!";
} //버튼을 클릭하면 버튼이 클릭됐다고 뜬다
function mouseoverBtn() {
    document.getElementById("text").innerHTML = "버튼 위에 마우스가 있네요!";
} //버튼 위에 마우스를 두면 버튼 위에 마우스가 있다고 뜬다
function mouseoutBtn() {
    document.getElementById("text").innerHTML = "버튼 밖으로 마우스가 나갔어요!";
} //버튼 밖으로 마우스를 두면 버튼 밖으로 마우스가 나갔다고 뜬다
</script>

📗 이벤트 리스너 삭제

removeEventListener() 메소드를 사용하면 등록된 이벤트 리스너를 삭제할 수 있다

🎈 예제

<script>
function clickBtn() {
    btn.removeEventListener("mouseover", mouseoverBtn);
    btn.removeEventListener("mouseout", mouseoutBtn);
    document.getElementById("text").innerHTML = "이벤트 리스너가 삭제되었어요!";
} //버튼을 누르면 이벤트 리스너가 삭제되며 삭제되었다고 뜬다
</script>

📘 이벤트 객체

특정 타입의 이벤트와 관련이 있는 객체

🎈 예제

<script>
var btn = document.getElementById("btn"); // 아이디가 btn인 요소를 선택함.
btn.addEventListener("click", clickBtn);  // 선택한 요소에 click 이벤트 리스너를 등록함.
function clickBtn(event) {
    document.getElementById("text").innerHTML =
    "이 이벤트의 타입은 " + event.type + "이며, 이벤트의 대상은 " + event.target + "입니다.";
} //이 이벤트의 타입은 click이며, 이벤트의 대상은 [object HTMLButtonElement]입니다.
</script>

✔ 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있다
✔ 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다
✔ 이벤트가 실행될 때 이벤트 리스너의 인자로 전달된다

📔 preventDefault()

어떤 이벤트를 명시적으로 처리하지 않은 경우 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다

🎁 문법

event.preventDefault();