<출처: Youtube 채널명: 언더월드 UNDERWORD> https://www.youtube.com/shorts/qwhFQYY4FWs
이벤트
- 마우스 클릭, 키보드 입력, 문서의 로딩들과 같은 사용자의 입력 행위나 브라우저의 상태 변화를 자바스크립트 코드에게 알려줍니다
이벤트 리스너
- 발생한 이벤트에 대처하기 위해서 작성된 자바스크립트 코드입니다.
작성방법
- HTML태그 안에 작성
- DOM 객체의 이벤트 리스트 property에 작성
DOM 객체의 addEventListener('이벤트', 함수) 메서드 사용
<!-- 09_event/09-01_inner.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-01_inner</title>
<script type="text/javascript">
/*
# 이벤트
- 마우스 클릭, 키보드 입력, 문서의 로딩들 사용자의 입력 행위나 브라우저의 상태 변화를
자바스크립트 코드에게 알려줍니다
# 이벤트 리스너
- 발생한 이벤트에 대처하기 위해서 작성된 자바스크립트 코드입니다.
# 작성 방법
- HTML 태그안에 작성
- DOM 객체의 이벤트 리스트 property에 작성
DOM 객체의 addEventListener('이벤트', 함수) 메서드 사용
*/
window.onload = function(){ // 문서가 완전히 로드되면 호출
let p = document.getElementById("p");
p.onmouseover = over; // over 함수를 onmouseover 리스너로 등록
p.onmouseout = out; // out 함수를 onmouseout 리스너로 등록
let pe = document.getElementById("pe");
pe.addEventListener("mouseover", over2);
pe.addEventListener("mouseout", out2);
}
function over(){
p.style.backgroundColor="brown";
}
function out(){
p.style.backgroundColor="gray";
}
function over2(){
pe.style.backgroundColor="skyblue";
}
function out2(){
pe.style.backgroundColor="pink";
}
</script>
</head>
<body>
<h1>HTML 태그에 리스너 작성</h1>
<p onmouseover="this.style.backgroundColor='orange'"
onmouseout="this.style.backgroundColor='silver'">마우스를 올려보세요</p>
<br/>
<h1>객체의 이벤트 리스트 property에 함수 적용</h1>
<p id="p">마우스를 올려보세요</p>
<br/>
<h1>addEventListener()을 이용한 리스트 등록</h1>
<p id = "pe">마우스를 올려보세요</p>
</body>
</html>
바다속 무너 개발자