티스토리 뷰
1. 자바스크립트로 이벤트 처리 방법
- 첫번째 방법 :
- Const button = document.queryselector(“#A”);
- button.onclick = function( ){ … };
- 두번째 방법 :
- Const button = document.queryselector(“#A”);
- button.addEventListener(이벤트 유형, 이벤트 헨들러 );
- button.addEventListener(‘click’, function( ) { … } );
- button.addEventListener(‘click’, ( ) => { … } );
2. 제이쿼리로 이벤트 처리 방법
- $(“이벤트 대상 선택”).이벤트등록메소드(function( ) { … } );
- $(“#A”).click(function( ) { … } );
[ 1. 이벤트 등록 메소드 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 이벤트 등록 메소드</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// ======================================================
$(".btn1").click(function(e){
console.debug(`btn1 onclick() invoked.`);
console.log(`\t + e.currentTarget :`, e.currentTarget);
$(".btn1").parent().next().css({ "color" : "#f00" }); // 버튼1의 부모노드의 바로 다음 동생에 위치한 노드를 선택해 css를 조작
}); // onclick
// $(".btn1").click(() => {
// console.debug(`btn1 onclick() invoked.`);
// $(".btn1").parent().next().css({ "color" : "#f00" }); // 버튼1의 부모노드의 바로 다음 동생에 위치한 노드를 선택해 css를 조작
// }); // onclick ( 방법2 )
// ======================================================
// 그룹이벤트 처리방법 : on( ) 메소드 방식 (***) - 연관배열로 작성한다.
// 연관배열을 이용한 그룹이벤트 등록, 이벤트별 처리를 다르게 지정
$(".btn2").on({
"mouseover focus" : (e) => { // 포인터가 왔을때 ( mouseover와 focus에 같은 이벤트 메소드 지정)
console.log(`onmouseover or onfocus`);
console.log(e);
// e( event )를 받아와서, 현재 어떤 이벤트가 실행되었는지 알 수 있다. (**)
console.log(`\t + e.currentTarget :`, e.currentTarget);
// 현재 이벤트가 발생한 타켓을 확인할 수 있다.
$(".btn2").parent().next().css({ "color" : "#0f0" });
},
// mouseenter <-> mouseout
"mouseout blur" : e => { // 포인터가 없어졌을때
console.log(`mouseout or blur`);
console.log(e);
console.log(`\t + e.currentTarget :`, e.currentTarget);
$(".btn2").parent().next().css({ "color" : "#000" });
}
}); // on( )
// 영역 내에 들어왔는지, 빠져나왔는지에 대한 기준은 border을 기준으로 판단하게 된다. ( margin은 포함되지 않는다. ) (**)
}); //.jq
</script>
</head>
<body>
<p>
<button class="btn1"> 버튼1 </button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>
</html>[ 2. 이벤트 등록 메소드 2 ] (****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 이벤트 </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// ======================================================
// 1. 단독 이벤트 핸들러 등록
$(".btn1").click( () => {
console.log(`onclick() invoked.`);
console.debug(`\t 1. this:`,this);
$(".btn1").parent().next().css({ "color" : "#f00" });
}); // onclick
// ======================================================
// 2. 그룹 이벤트 핸들러 등록 ( 그룹으로 하나만 등록할 수도 있지만, 지양하자 )
$(".btn2").on({
"mouseover focus" : function() {
console.debug(`onmouseover or onfocus`);
console.debug(`\t 2. this:`,this);
// $(".btn2").parent().next().css({ "color" : "#0f0" });
$(this).parent().next().css({ "color" : "#0f0" }); // 익명함수에서는 가능하다.
}
}); // onmouseover & onfocus
// ======================================================
// 3. 마우스로 직접 클립하지 않아도, 아래처럼 인자값이 없는
// 이벤트 등록 메소드를 호출하면, 인벤트를 직접 발생시킨다. (****)
$(".btn1").click(); // 프로그램에서 onclick 이벤트 발생
$(".btn2").trigger("mouseover"); // 트리거(trigger)는 지정된 이벤트를 직접 발생시킴 (***)
// ======================================================
// 이벤트를 다룰 때에는 익명함수 function(){}이 람다식보다 좋다.
}); // .jq
</script>
</head>
<body>
<p>
<button class="btn1"> 버튼1 </button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>
</html>[ 3. 이벤트 제거 메소드 - off ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 이벤트 제거 </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$(".btn1").click(function(){
console.log(`onclick() invoked.`);
$(".btn1").parent().next().css({ "color" : "#f00" });
}); // on click
$(".btn2").on({
"mouseover focus" : function(){
console.debug(`onmouseover or onfocus`);
$(".btn2").parent().next().css({ "color" : "#0f0" });
}
}); // onmouseover & onfocus
// 이미 등록된 해당 요소노드의 이벤트 헨들러를 offf(최소)시킨다.
$(".btn1").off("click");
$(".btn2").off("mouseover focus");
}); //.jq
</script>
</head>
<body>
<p>
<button class="btn1"> 버튼1 </button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>
</html>[ 4. 이벤트 실행 순간 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 실행시간</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 1. The original jQuery Entry Point ( DOM 트리가 완료되면, 바로 )
$(document).ready(function(){
var h1 = $(".img1").height();
console.log("ready :", h1); // 0
}); // onready
// 2. 현재의 HTML 문서의 모든 요소(자원)의 로딩이 완료된 상태일 때, onload이벤트 발생
// The Second jQuery Entry Point
$(window).load(function(){
var h2 = $(".img1").height();
console.log("load :", h2); // 400
}); // onload
// onready와 onload는 실행되는 시간이 다르다. (**)
}); //.jq
</script>
</head>
<body>
<p>
<img src="https://picsum.photos/id/684/600/400" class="img1">
<!-- place-hold.it -->
</p>
</body>
</html>[ 5. 이벤트 기본 동작 무력화 ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 이벤트 기본동작 무력화</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 1. on(이벤트 타입, 이벤트 핸들러) 메소드로 단독 이벤트 헨들러 등록
$(".btn1").on("click", function(e){
console.debug(`onclick on btn1 invoked.`);
// e.preventDefault(); // onclick 이벤트의 기본동작을 무력화 ( 버튼1을 클릭해도 링크로 들어가지지 않는다. ) (***)
$(".txt1").css({ backgroundColor : "#ff0" });
return false; // onclick 이벤트의 기본동작을 무력화2 (***)
}); // onclick
// 2. on 메소드로 단독 이벤트 헨들러 등록
$(".btn2").on("click", function(e){
console.debug(`onclick on btn2 invoked.`);
// e.preventDefault();
$(".txt2").css({ backgroundColor : "#0ff" });
}); // onclick
$(".btn3").on("dblclick", function(){
console.debug(`dblclick on btn3 invoked.`);
// e.preventDefault();
$(".txt3").css({ backgroundColor : "#0f0" });
}); // onclick - 더블 클릭할때
}); //.jq
</script>
</head>
<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">내용1</p>
<p><button class="btn3">버튼3</button></p>
<p class="txt3">내용3</p>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 75일차 - 제이쿼리 ( 이벤트 메소드 ) / AJAX (*****) (0) | 2022.06.15 |
|---|---|
| KH 74일차 - 제이쿼리 ( 이벤트 메소드 ) (***) (0) | 2022.06.14 |
| KH 72일차 - 제이쿼리 ( 객체 편집 메소드 ) (****) (0) | 2022.06.10 |
| KH 71일차 - 제이쿼리 ( 메소드 / 조별과제 ) (****) (0) | 2022.06.09 |
| KH 70일차 - 제이쿼리 ( 선택자 / 메소드 ) (*****) (0) | 2022.06.08 |
댓글