jquery-19: 이벤트2
다중 이벤트 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트-3(jQuery이용)</title>
<script src="libs/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
//버튼에 그룹 이벤트 등록(on()를 이용한다.)
//1번째 방법
$("#btn").on("mouseover focus", function(){
//alert("안녕하세요");
console.log("이벤트 발생");
});
//2번째 방법
// $("#btn").on({
// "mouseover focus" : function() {
// console.log("이벤트 발생");
// }
// });
//3번째 방법
// $("#btn").on({
// "mouseover" : function(){
// console.log("이벤트 발생");
// },
// "focus" : function(){
// console.log("이벤트 발생");
// }
// });
});
</script>
</head>
<body>
<button id="btn">버튼</button>
</body>
</html>
다중 이벤트 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트-4(jQuery이용)</title>
<script src="libs/jquery-3.5.1.min.js"></script>
<script>
// $(document).ready(function(){
// });
//위의 코드와 같은 역할 한다.
$(function( ){
$(".btn1").click(function(){
$("#p1").css({
"color" : "#f00",
"font-weight" : "bold"
})
});
$(".btn2").on({
//마우스가 btn2에 올라갔을때와 포커스가 갔을 때...
"mouseover focus" : function() {
$("#p2").css({
"color" : "#0f0",
"font-weight" : "900"
});
},
//마우스가 btn2에서 커서가 나가거나 포커스를 강제로 잃어버렸을때..
"mouseout blur" : function() {
$("#p2").css({
"color" : "#000",
"font-weight" : "normal"
});
}
});
//off()는 등록된 이벤트를 제거할 때 사용한다.
$(".btn1").off("click");
$(".btn2").off("mouseout blur");
});
</script>
</head>
<body>
<p id="p1">반갑습니다.</p>
<button class="btn1">버튼1</button>
<p id="p2">안녕하세요.</p>
<button class="btn2">버튼2</button>
</body>
</html>
ready와 load의 차이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트-5(jQuery이용)</title>
<script src="libs/jquery-1.10.2.min.js"></script>
<script>
//ready()/load()차이점
//ready() : 이벤트는 클라이언트가 사이트를 방문할 때 요청한 HTML문서
//객체의 로딩이 끝나면 이벤트를 실행한다.
//load() : 이벤트는 외부에 연동 소스(iframe, img, video 등)의 로딩이
//끝나면 이벤트를 실행한다.
$(function( ){
$(document).ready(function(){
var h1 = $(".img").height();
console.log("ready() : ", h1);
});
$(window).load(function(){
var h2 = $(".img").height();
console.log("load() : ", h2);
});
});
</script>
</head>
<body>
<p>
<!-- 외부에 있는 연동 소스이다. -->
<img src="https://place-hold.it/500X500" class="img">
</p>
</body>
</html>
댓글남기기