로딩 이벤트 메서드
-> 사용자 브라우저 로딩이 완료되면 이벤트 핸들러를 실행합니다.
ready() -> 사용자가 사이트를 방문할 때 요청한 html 문서객체의 로딩이 끝나면 이벤트를 발생시킵니다.
lead() -> 외부에 연동된 소스(iframe, img, video)의 로딩이 끝나면 이벤트를 발생시킵니다.
로딩 이벤트 기본형
$(document).ready(function() {자바스크립트 코드;});
$(document).on("ready" , function() {자바스크립트 코드;});
$(document).load(function() {자바스크립트 코드;});
$(document).on("load" , function() {자바스크립트 코드;});
<script>
$(function(){
$(document).ready(function() {
var h1 = $(".img1").height();
console.log("ready :",h1) // ready : 0
});
$(window).load(function(){
var h2 = $(".img1").height();
console.log("load :",h2); // load : 300
});
});
</script>
<body>
<p>
<img src="http://place-hold.it/300X300" class="img1">
</p>
</body>이미지1의 높이값이 ready:0 / load:300 으로 콘솔창에 출력됩니다.
마우스 이벤트
click() / dblclick() 이벤트 메서드
click() 이벤트 기본형
1. click 이벤트 등록
$("이벤트 대상 선택").click(function() {자바스크립트 코드;});
$("이벤트 대상 선택").on("click",function() {자바스크립트 코드;});
2.click 이벤트 강제 발생
$("이벤트 대상 선택").click();
dbclick() 이벤트 기본형
1.dblclick 이벤트 등록
$("이벤트 대상 선택").dblclick(function() {자바스크립트 코드;});
$("이벤트 대상 선택").on("dblclick",function() {자바스크립트 코드;});
2.dblclick 이벤트 강제 발생
$("이벤트 대상 선택").dbclick();
<a> , <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기
a 링크된 주소로 이동하는 기본 이벤트 차단 /
form 요소 submit action에 등록된 주소로 이동시키는 이벤트 차단
기본형
1.return false를 이용한 차단 방식
$("a 또는 form").이벤트 메서드(function() {
자바스크립트 코드;
return false;
});
2.preventDefault() 메서드를 이용한 차단 방식
$("a 또는 form")이벤트 메서드(function(e) {
e.preventDefault(); //prevent는 막다. Default는 기본이벤트를 의미.
자바스크립트 코드;
});
<script>
$(function(){
$(".btn1").on("click",function(e) {
e.preventDefault();
$(".txt1").css({"background-color":"#ff0"});
});
$(".btn2").on("click",function(e) {
$(".txt2").css({"background-color":"#0ff"});
});
$(".btn3").on("dbclick",function() {
$(".txt3").css({"background-color":"#0f0"});
});
});
</script>
<body>
<p><a href="#" class="btn1">버튼1</a></p>
<p class="txt1">내용 1</p>
<p><a href="#" class="btn2">버튼2</a></p>
<p class="txt2">내용2</p>
<p><button class="btn3">버튼3</button></p>
<p class="txt3">내용 3</p>
</body>e.preventDefault();
prevent는 막다 / Default는 기본 이벤트를 의미합니다.
처음 출력되는 왼쪽 이미지 ->
버튼1 클릭하면 내용1에 노란배경
버튼2 클릭하면 내용2 a태그에 연결된 링크고 이동
버튼3 더블클릭하면 내용3에 초록색 배경이 생깁니다.
'IT > jQuery' 카테고리의 다른 글
| [jquery] 이벤트 객체와 종류 - scroll 이벤트 (0) | 2020.03.29 |
|---|---|
| [jquery] jquery 이벤트 등록 메서드3 (mouse) (1) | 2020.03.15 |
| [jquery] jquery 이벤트 등록 메서드 (0) | 2020.02.12 |
| [jquery] jquery 객체편집 메서드2 (0) | 2020.02.11 |
| [jquery] jquery 객체 편집 메서드 (0) | 2020.02.10 |
댓글