이벤트 등록 메서드는 사이트에서 방문자가 취하는 모든 행위의 이벤트를 실행되게 하는코드 입니다. 이벤트 메서드는 방문자가 지정한 요소에서 어떠한 특정동작이 일어났을때 저장된 코드를 실행시킬 수 있습니다. 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 2개이상의 이상의 이벤트를 등록 할 수 있는 메서드가 있습니다.
기본 문법 사용방식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이벤트메서드와 문서객체메서드</title>
<script src="jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
var h1 = document.getElementById('text');
//1. 이벤트 속성
h1.onclick = function(){
this.style.color = 'red';
}
//2. 이벤트메서드
h1.addEventListener('click',function(){
this.style.textDecration = 'underline';
});
});
</script>
</head>
<body>
<h1 id="text">제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>
on메서드 예제1
<script>
$(document).ready(function(){
$('h1').on('click',function(){
$(this).css('color','red');
});
});
</script>
hover 메서드 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이벤트메서드와 문서객체메서드</title>
<style>
.active{
background-color: black;
color: yellow;
}
</style>
<script src="jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
//hover() : mouseenter와 mouseleave를 번갈아 실행하는 이벤트메서드
//hover(콜백함수,콜백함수)
$('h1').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});
});
</script>
</head>
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>
</html>
댓글