교육과정 기록/jQuery
jQuery 이벤트
춘식이왔엉
2022. 7. 1. 21:17
<a> , <form> 태그에 클릭 이벤트 적용 시, 기본 이벤트 차단하기
1. return false를 이용해 차단
$("a 또는 form").이벤트 메서드(function() {
자바스크립트 코드;
return false;
});2. preventDefault() 메서드를 이용해 차단
$(".btn1").on("click", function (e) { // 제이쿼리 이벤트 객체를 매개변수로 받음
e.preventDefault(); // *** 이벤트의 기본동작을 중지시킴
$(".txt1").css( { backgroundColor: "#ff0"});
}) // onclick
mouseover() / mouseout() / hover()
<script>
$(() => {
$(".btn1").on({
"mouseover": function () {
$(".txt1").css( { backgroundColor: "yellow"});
},
"mouseout": function () {
$(".txt1").css( { backgroundColor: "none"});
}
}); // .on
// 버튼2에 위의 2개의 이벤트를 합쳐놓은, hover() 메소드 사용
$(".btn2").hover(
function () {
$(".txt2").css({ backgroundColor: "aqua"});
},
function () {
$(".txt2").css({ backgroundColor: "none"});
}
); // .hover
});
</script>
mouseout() 과 mouseleave() 의 차이
<script>
$(() => {
$("#box_1").on("mouseout", function () {
$("#box_1").css({ backgroundColor: "yellow"});
}); // onmouseout
$("#box_2").on("mouseleave", function () {
$("#box_2").css({ backgroundColor: "pink"});
}); // onmouseleave
});
</script>
<style>
div { border: 5px solid purple;}
</style>
</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>
mousemove()
<script>
$(() => {
// document (즉, 브라우저의 viewport 영역)내에서 마우스가 움직일 때,
// 제이쿼리 이벤트 객체를 통해 마우스의 좌표를 얻어낼 수 있음.
$(document).on("mousemove", function (e) {
$(".posX").text(e.pageX);
$(".posY").text(e.pageY);
});
});
</script>
</head>
<body>
<h1>mousemove</h1>
<p>X : <span class="posX">0</span></p>
<p>Y : <span class="posY">0</span></p>
</body>
pageX , pageY / clientX , clientY
<script>
$(() => {
// document (즉, 브라우저의 viewport 영역)내에서 마우스가 움직일 때,
// 제이쿼리 이벤트 객체를 통해 마우스의 좌표를 얻어낼 수 있음.
$(document).on("mousemove", function (e) {
// *pageX/Y : 스크롤바의 이동거리를 포함
$(".posX").text(e.pageX);
$(".posY").text(e.pageY);
// *clientX/Y : 스크롤바의 이동거리를 무시
// 항상 좌측상단의 꼭짓점을 원점으로 함 (화면 모니터를 기준으로 함)
$(".clientX").text(e.clientX);
$(".clientY").text(e.clientY);
});
});
</script>
focus() / blur()
$("#user_id_1, #user_pw_1").on("focus", function () {
$(this).css({ backgroundColor: "pink"});
}); // onfocus
$("#user_id_1, #user_pw_1").on("blur", function () {
$(this).css({ backgroundColor: "white"});
}); // onblur그룹 이벤트 등록 메서드
on() / bind() 의 차이
- 둘 다 이벤트 대상 요소에 2개 이상의 이벤트를 등록.
But, 'on' 은 사용 방식에 따라 이벤트를 등록한 이후에도
동적으로 생성되거나 복제된 요소에도 이벤트가 적용됨
delegate()
- 선택한 요소의 하위 요소에 이벤트 등록.
- 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트 적용
one()
- 이벤트 대상 요소에 1개 이상의 이벤트를 등록.
지정한 이벤트가 1회 발생하고 자동으로 해제됨
<script>
$(() => {
// 미래시점에 '.btn_1.on' 요소노드가 출현하면,
// 두번째 인자값의 그룹이벤트와 세번째 이벤트 핸들러를 등록하라
$(".btn_wrap").delegate(".btn_1.on", "mouseover focus", function () {
alert("HELLO!");
}); // .delegate
$(".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>