티스토리 뷰
반응형
이벤트 종류에대한 정보는 http://api.jquery.com/category/events/ 에서 확인가능합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id="event1">클릭 해보세요.</h1>
<h1 id="event2">더블클릭 해보세요.</h1>
<h1 id="event3">브라우저 창을 조절해보세요.</h1>
<h1 id="event4">클릭하면 5초후 내용이 변경됩니다.</h1>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/*
jQuery 이벤트 사용방법
$("#title4").이벤트이름(function(){
$("#title4").html("클릭 되었습니다.").css("color", "#ff0000");
});
*/
//클릭 이벤트
$("#event1").click(function() {
$("#event1").html("클릭 되었습니다.").css("color", "#ff0000");
});
//더블클릭 이벤트
$("#event2").dblclick(function() {
//this는 자기자신을 가리키는 키워드이므로 #event2대신 this로 사용가능합니다.
//$("#event2").html("더블클릭 되었습니다.").css("color", "#0000ff");
$(this).html("더블클릭 되었습니다.").css("color", "#0000ff");
});
//브라우저 창 조절 이벤트
$(window).resize(function() {
$("#event3").html($(window).width()+" x "+$(window).height());
});
//setTimeout()로 실행시간 5초 지연시키기
$("#event4").click(function() {
setTimeout(function() {
$("#event4").html("5초가 지났습니다.");
}, 5000);
});
</script>
</body>
</html>창조절이벤트를 확인하실려면 컨트롤버튼을 누르시고 휠을 위아래로 돌려보세요.
확대 축소 기본으로 돌아가실려면 컨트롤+숫자(0)번을 눌러보세요.
반응형
'Javascript, jQuery' 카테고리의 다른 글
| (jQuery) 제이쿼리 Ajax 함수 사용방법 간단히 알아보기 (0) | 2017.09.14 |
|---|---|
| (jQuery) 제이쿼리 이벤트 처리 간단히 알아보기 (2) (0) | 2017.09.13 |
| (jQuery) 제이쿼리 기초 및 class,id,name으로 제어하기 (0) | 2017.09.10 |
| (javascript) 자바스크립트 Json 형식 간단히 알아보기 (0) | 2017.09.07 |
| (Javascript) 자바스크립트에서 form 입력양식 제어하기 (0) | 2017.09.06 |
댓글
최근에 올라온 글
최근에 달린 댓글