▼ 클릭 이벤트를 여러 방법으로 동작시키는 법
<script>
$(function( ) {
$(".btn1").on("click", function(e){ // 제이쿼리 이벤트 객체를 매개변수로 받는다.
e.preventDefault( ); // 이벤트의 기본동작을 중지시킨다. / 화면전환을 중지시킴
$(".txt1")
.css({"background-color":"#ff0"});
});
$(".btn2").on("click", function(e){ //제이쿼리 이벤트 객체를 매개변수로 받는다.
$(".txt2") // 아래 css가 먼저 실행되고 링크페이지로 넘어간다.
.css({"background-color":"#0ff"});
// return false; // 이렇게 하면 링크로 못간다.
// e.preventDefault( ); 이 메소드에서 false값을 리턴하는것과 같다.
});
$(".btn3").on("dblclick", function(){//더블클릭해야 스타일 작업이 먹힌다.
$(".txt3")
.css({"background-color":"#0f0"});
});
});
</script>
</head>
<body>
<p><a href="http://www.naver.com/" class="btn1">버튼1</a></p>
<p class="txt1">내용1</p>
<p><a href="http://www.naver.com/" class="btn2">버튼2</a></p>
<p class="txt2">내용2</p>
<p><button class="btn3">버튼3</button></p>
<p class="txt3">내용3</p>
</body>▼ MouseOver&MouseOut / Hover 두개의 사용
<script>
$(function( ) {
// 호버와의 차이점이 무얼까!?
// 호버는 진짜 이벤트가 아니다.
// ON hover는 불가능 호버는 그냥 over out을 합쳐놓은 것
//버튼1에 2개의 이벤트 (over, out) 핸들러를 등록한다.
$(".btn1").on({
"mouseover" : function( ) {
$(".txt1")
.css({"background-color":"yellow"});
},
"mouseout" : function( ) {
$(".txt1")
.css({"background":"none"});
}
});
// 버튼2에 위의 2개의 이벤트를 합쳐놓은, hover() 메소드 사용
$(".btn2").hover(function( ) {
$(".txt2")
.css({"background-color":"aqua"});
}, //over에 대해
function(){
$(".txt2")
.css({"background":"none"});
});// out에 대해
});
</script>
</head>
<body>
<p><button class="btn1">Mouse Over/Mouse Out</button></p>
<p class="txt1">내용1</p>
<p><button class="btn2">Hover</button></p>
<p class="txt2">내용2</p>
</body>
▼ MouseOut / Mouseleave 차이
<script>
$(function( ) {
//div태그를 벗어나 자식요소에가기만 하더라도 발생
$("#box_1").on("mouseout", function(){
$("#box_1")
.css({"background-color":"yellow"});
});// out
//하위요소노드까지 포함해서 경계형성 커서가 들어갔다가 나오면 발생
$("#box_2").on("mouseleave", function(){
$("#box_2")
.css({"background-color":"pink"});
});// leave
});
</script>
</head>
<body>
<h1>mouseout</h1>
<div id="box_1">
<p><a href="#">내용1</a></p>
<p><a href="#">내용2</a></p>
<p><a href="#">내용3</a></p>
</div>
<h1>mouseleave</h1>
<div id="box_2">
<p><a href="#">내용4</a></p>
<p><a href="#">내용5</a></p>
<p><a href="#">내용6</a></p>
</div>
</body>
▼ 마우스의 좌표 위치 반환 이벤트
<style>
body{height: 2000px;}
</style>
<!-- cdn 연결 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js" integrity="sha512-QDsjSX1mStBIAnNXx31dyvw4wVdHjonOwrkaIhpiIlzqGUCdsI62MwQtHpJF+Npy2SmSlGSROoNWQCOFpqbsOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function( ) {
$(document).on("mousemove", function(e) {
$(".posX").text(e.pageX);
$(".posY").text(e.pageY); // 스크롤에 이동거리도 표시한다.
$(".clientX").text(e.clientX);
$(".clientY").text(e.clientY); // 뷰포트 영역에서 왼쪽상단이 기준
});
});
</script>
</head>
<body>
<h1>mousemove</h1>
<p>X : <span class="posX">0</span>px</p>
<p>Y : <span class="posY">0</span>px</p>
<p>clientX : <span class="clientX">0</span>px</p>
<p>clientY : <span class="clientY">0</span>px</p>
</body>
▼ 문서맨 위에서 얼마나 떨어져있는지알려주는 메소드와 fixed의 조합
<style>
body{
height:10000px;
width:5000px;
}
#wrap{
position: fixed;
left: 10px; top: 10px;
}
</style>
<script>
$(window).on("scroll",function(){
var sc_top = $(this).scrollTop();
var sc_left = $(this).scrollLeft();
$(".top").text(sc_top);
$(".left").text(sc_left);
});
</script>
</head>
<div id="wrap">
<p>scrollTop: <span class="top">0</span>px</p>
<p>scrollLeft: <span class="left">0</span>px</p>
</div>
▼ 선택이 되었을 때와 선택이 취소될 때 이벤트는 2가지 방법이 있다
<script>
$(function(){
$("#user_id_1, #user_pw_1").on("focus",
function(){
$(this)
.css({"background-color":"pink"});
console.log("focus");
}); //focus
$("#user_id_1, #user_pw_1").on("blur",
function(){
$(this)
.css({"background-color":"#fff"});
console.log("blur");
}); // blur
// 이름의 구분이 명확한 이것이 좋다
// 허나 보편적으로 위아래는 차이가 없고 위에꺼를 많이쓴다.
$("#frm_2").on("focusin",
function(){
$(this)
.css({"background-color":"pink"});
console.log("focusin");
}); // focuusin
$("#frm_2").on("focusout",
function(){
$(this)
.css({"background-color":"#fff"});
console.log("focusout");
}); // onfocusout
}); // .jq
</script>
</head>
<body>
<h1>focus / blur</h1>
<form action="#">
<p>
<label for="user_id_1">ID</label>
<input type="text"
name="user_id_1" id="user_id_1">
</p>
<p>
<label for="user_pw_1">PW</label>
<input type="password"
name="user_pw_1" id="user_pw_1">
</p>
</form>
<h1>focusin / focusout</h1>
<form action="#" id="frm_2">
<p>
<label for="user_id_2">ID</label>
<input type="text"
name="user_id_2" id="user_id_2">
</p>
<p>
<label for="user_pw_2">PW</label>
<input type="password"
name="user_pw_2" id="user_pw_2">
</p>
</form>
</body>
▼ 데이터를 저장하는 메소드 (키와 밸류를 객체의 형태로 저장한다)
<script>
$(function(){
$("#btn1")
.data({"text":"javascript"}) // 선택자가 선택한 요소노드에 key,value를 저장
.on({ // 객체 리터럴을 통한, 그룹 이벤트 등록
"mouseover": overFnc,
"mouseout": outFnc
});
//복잡한 메소드시그니쳐
//JQuery.data(obj: {[key: string]: any;}): JQuery (+3 overloads)
$("#btn2")
.data({"text":"welcome!"}) // 선택자가 선택한 요소노드에 객체(데이터)저장
.on({ // 객체 리터럴을 통한, 그룹 이벤트 등록
"mouseover focus": overFnc, // hoisting
"mouseout blur": outFnc // hoisting
});
//(method) JQuery.data(key: string, value: any): JQuery (+3 overloads)
function overFnc() {
$(".txt").text($(this).data("text"));
} // overFnc
function outFnc() {
$(".txt").text("");
} // outFnc
});
</script>
</head>
<body>
<p><button id="btn1">버튼1</button></p>
<p><button id="btn2">버튼2</button></p>
<p class="txt"></p>
</body>
- removeData()를 통해 저장된 데이터를 지울 수 있음
▼라이브 이벤트 등록 방식 = 동적으로 움직이는 요소에 이벤트 부여 (미래시점!)
<script>
$(function(){
// 라이브 이벤트 등록 방식 = 동적으로 움직이는 요소에 이벤트 부여 (미래시점!)
// 정적으로 이벤트를 걸다. .btn_1.on이라는 요소노드는 없다.
$(".btn_1.on").on("mouseover focus", function() {
alert("HELLO!");
});
$(".btn_1").addClass("on"); // class 속성에 "on" 속성값 추가 ->작동이 안된다.
// 라이브 이벤트로 해결한다.
// 1. DOM인 document에 event 등록한다
// 2. 미래에 대해 동적으로 추가될 ".btn_2.on" 매개변수에 대한 인자값을 준다.
// 미래에 대한 매개변수가 미래에 추가되지 않으면 실행이 되지 않는다.
$(document).on("mouseover focus",".btn_2.on", function() {
alert("WELCOME!");
});
$(".btn_2").addClass("on"); // class 속성에 "on" 속성값 추가
});
</script>
</head>
<body>
<div id="wrap">
<p><button class="btn_1">버튼1</button></p>
<p><button class="btn_2">버튼2</button></p>
</div>
</body>
▼ on말고 다른 방법의 동적 이벤트 생성
<script>
$(function(){
// 미래싯점에 ".btn_1.on"요소노드가 출현하면 , 두번째 인자값의 그룹이벤트와
// 세번째 이벤트 핸들러를 등록하라
$(".btn_wrap").delegate(".btn_1.on",
"mouseover focus", function() {
alert("HELLO!");
});
$(".btn_1").addClass("on"); // 동적으로 class 속성값으로 "on" 추가 (미래 싯점)
//동적인 요소에 등록한 이벤트를 1회성으로 처리.
// 1. document 객체에 먼저 그룹이벤트를 등록시키고
// 2. 미래싯점에 두번째 인자값을 만족시키는 요소가 출현하면,
// 3. 그 요소에 이벤트를 1회성으로 등록함 (두번째부터 안됌)
$(document).one("mouseover focus",
".btn_2.on", function() {
alert("WELCOME!");
});
$(".btn_2").addClass("on");
});
</script>
</head>
<body>
<div id="wrap">
<p class="btn_wrap">
<button class="btn_1">버튼1</button>
</p>
<p><button class="btn_2">버튼2</button></p>
</div>
</body>
▼ 이벤트 해지방법
<script>
$(function(){
$(".btn_1").on("mouseover", function() { //정적 단일 이벤트 등록
alert("HELLO!");
});
// 특징: document에 이벤트 등록하는 특징이 있다!!(live event 일 경우)
$(document).on("mouseover", ".btn_2", function() { // 라이브 단일 이벤트 등록
alert("WELCOME!");
});
// 제이쿼리함수($)로 새로운 요소를 만드려면, 아래와 같이 그저 문자열로
// 새로운 태그를 만들면 된다.
var btn_2 = $("<p><button class=\"btn_2\">버튼2</button></p>");
$("#wrap").append(btn_2);
//----------------주로 on으로 활성화 off 해지한다.
$(".del_1").on("click", function(){
$(".btn_1").off("mouseover"); // 등록 이벤트 해지
}); // onclick
$(".del_2").on("click", function(){
$(document).off("mouseover",".btn_2"); // 라이브 등록 이벤트 해지 -> 이벤트리스너를 삭제
}); // onclick
});
</script>
</head>
<body>
<div id="wrap">
<p><button class="btn_1">버튼1</button></p>
</div>
<p>
<button class="del_1">버튼1 이벤트 해지</button>
<button class="del_2">버튼2 이벤트 해지</button>
</p>
</body>
Ajax 다음 시간에..
일단 흐자