<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Event</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$("button").on({ // 모든 <button>요소에
mouseenter: function() { // mouseenter 이벤트를 설정함.
$("#text").append("마우스가 버튼 위로 진입했어요!<br>");
},
click: function() { // click 이벤트를 설정함.
$("#text").append("마우스가 버튼을 클릭했어요!<br>");
},
mouseleave: function() { // mouseleave 이벤트를 설정함.
$("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
}
});
});
</script>
</head>
<body>
<h1>.on() 메소드</h1>
<button>마우스를 버튼 위로 가져가거나 클릭해 보세요!</button>
<p id="text"></p>
</body>
</html>