<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>on메서드를 이용한 이벤트 연결</title>
<style type="text/css">
.reverse{
background:black;
color:white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//하나의 이벤트 연결
//이벤트 타입
$('h1').on('click',function(){
$(this).html(function(index,html){
return html+ '+';
})
});
//복수의 이벤트 연결
$('h1').on({
mouseover:function(){
$(this).addClass('reverse');//클래스 추가
},
mouseout:function(){
$(this).removeClass('reverse');//클래스 삭제
}
});
});
</script>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
s05_on.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동적으로 생성된 태그에 이벤트 연결</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//현재 존재하는 태그뿐만아니라 미래에 새로 생성되는 태그에도 이벤트 연결
// 이벤트타입,이벤트 발생 태그,이벤트 핸들러
$(document).on('click','h1',function(){
let length = $('h1').length; //h1태그의 갯수
let targetHTML = $(this).html();//이벤트가 발생한 h1태그의 내용 반환
$('#wrap').append('<h1>'+length+'-'+targetHTML+'</h1>');
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>Header</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>trigger를 이용한 이벤트 강제 발생</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//이벤트 연결
$('h1').on('click',function(){
$(this).html(function(index,html){
return html+'*'
});
});//end of on (on이 끝나고 트리거가 실행되어야됨)
//1초마다 매개변수로 전달된 함수를 실행
setInterval(function(){
//이벤트 타입
$('h1').trigger('click');
},1000);
});
</script>
</head>
<body>
<h1>Start :</h1>
</body>
</html>
