Front-End - Main Menu/html5 + CSS3 + JavaScript (종합 예제)

ex09_05 - event객체

ITRecipe 2023. 2. 24. 09:39
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>event객체</title>
</head>
<body>

<p id="p">마우스를 올려 봐라</p>
<button type="button" onclick="f(window.event)">클릭해라</button>
<!-- 시작태그의 이벤트 처리 속성에서 이벤트 함수 호출시 event를 전달하려면 event객체를 사용한다. -->
<!-- event객체는 window객체에 속하므로 f(event)로 사용해도 된다. -->
<script>
function f(e) {
	//이벤트처리리스너 함수에서 첫번쨰 파라미터는 event객체를 받는 파라미터이다.
	alert(e.type); //event의 type속성은 이벤트종류(이벤트명을 가진다.)
}
document.getElementById("p").onmouseover = f;
//DOM객체의 이벤트리스너 속성을 이용하므로 함수명만 온다(파라미터 표시를 하면 안된다.)
</script>

</body>
</html>