trigger( ): 이벤트 핸들러 없이도 함수를 실행시켜준다.
1. HTML 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover</title>
<style>
img{
width:200px; height:200px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<img src="../img/nature.jpg"/>
</body>
</html>
2. js파일
$(()=>{
// 수동으로 첫 번째 이미지를 클릭 시 클릭이벤트를 처리할 부분
let n = 1;
$("img:first").on("click", function(){ // 첫 번째 이미지를 클릭했을 때 실행할 함수
$("body").append("<img src='../img/img"+ n++ +".jpg'/>");
if(n>=4){ // 이미지가 4개여서 4까지만 돌고 다시 이미지 1번으로
n=1;
}
});
});
더보기
더보기
맨처음 이미지를 클릭할 때 마다 이미지가 생긴다.
$(()=>{
// 자동으로 첫 번째 이미지를 클릭이벤트 발생시키기(1초마다)
setInterval(function(){ // 함수를 바로 setInterval 안에 만들기
$("img").first().trigger('click');
}, 1000);
});
- 결과는 위와 동일한데 trigger( )를 사용했다.
