제이쿼리 이벤트

켄·2023년 7월 20일

이벤트 등록 메서드

이벤트 = 사이트에서 방문자가 취하는 모든 행위
이벤트 핸들러 = 이벤트가 발생했을 때 실행되는 코드

<script>
$("#btn").click(function(){ // id btn 요소를 클릭했을 때 무언가 실행
 	코드;
})
</script>

여기서 $(#btn)은 이벤트 대상
click()은 이벤트 등록 메서드
function(){코드}는 이벤트 핸들러 입니다.

이벤트 등록 방식

단독 이벤트 메서드

한 가지 동작에 대한 이벤트만 등록
예시로 클릭 했을 때.

<script>
$("이벤트 대상 선택").이벤트 등록 메서드(function() {
	코드;
})

$(".btn").click(function() {
	alert("welcome");
})
</script>

그룹 이벤트 등록 메서드

한 가지 동작 이상의 이벤트를 등록할 수 있음
예시로 클릭이나 마우스 올렸을 때.(2가지 이벤트 등록)

on() 이벤트 종류는 띄어쓰기로 구분

<script>
$("이벤트 대상 선택").on("이벤트종류1 이벤트종류2 ...", function() {
	cnosole.log("welcome");
})

$(".btn1").on("mouseover focus", function() {
	cnosole.log("welcome");
})
</script>

one() 지정한 이벤트가 1회만 발생

아래 예시는 마우스를 올리거나 포커스했을 때 alert 창이 1번만 뜹니다.

<script>
$(function () {
   $(".btn_1").one("mouseover focus", function () {
      alert("hello");
   });
});
</script>

이거 괄호가 많아서 좀 헷갈리는데
가장 바깥에 있는 괄호는 이벤트 등록 메서드( )나 on( ) 괄호 입니다.
이벤트 등록 메서드() 안에 function(){}을 넣으면 됩니다.

이벤트 제거 메서드

<script>
$("이벤트 대상").off("제거할 이벤트 종류");

$("#btn").off("click"); // id btn 요소의 click 이벤트를 제거합니다.
</script>

로딩 이벤트 메서드

HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행합니다.

ready()

HTML 문서 객체(document)의 로딩이 끝나면 이벤트 발생

<script>
// 단독
$(document).ready(function(){
	코드;
})

// 그룹
$(document).on("ready", function(){
	코드;
})
</script>

load()

외부에 연동된 소스(iframe, img, video 등)의 로딩도 끝나면 이벤트 발생

<script>
// 단독
$(document).load(function(){
	코드;
})

// 그룹
$(document).on("load", function(){
	코드;
})
</script>

마우스 이벤트

click(), dbclick()

더블클릭 작성 방식은 생략하겠습니다.

<script>
// 단독
$("이벤트 대상 선택").click(function(){
	코드;
})

// 그룹
$("이벤트 대상 선택").on("click", function(){
	코드;
})
</script>

preventDefault()

<a>, <form> 태그에 기본 이벤트 차단하는 방법

이게 뭔소리냐면
<a> 요소에 click이나 dbclick을 등록하면 클릭할 때마다
a 태그 특성상 링크된 주소로 이동하는 문제가 발생합니다.
<form> 요소의 submit도 action에 등록된 주소로 이동시켜버립니다.
등록한 이벤트를 정상적으로 작동시키려면 이런 기본 이벤트를 제거해야 합니다.

보여드리겠습니다.

<script>
$(".btn1").preventDefault(); // 괄호 안은 비웁니다.
	코드;
</script>

mouseover(), mouseout(), hover()

요소에 마우스를 올리거나, 벗어나거나.
hover은 올리거나 벗어날 때 각각 다른 이벤트 발생.

over과 out의 작성방식은 같습니다.
on()도 생략하겠습니다..

<script>
$('이벤트 대상 선택').mouseover(function() {
	코드;
})
</script>

hover 2개의 코드를 작성해야 합니다.

<script>
$('이벤트 대상 선택').hover(
	function() {마우스 오버 시 실행될 코드},
    function() {마우스 아웃 시 실행될 코드}
);
</script>

mouseneter(), mouseleave()

요소에 마우스를 올리거나, 벗어나거나.

그런데 mouseover, mouseout과 무엇이 다를까요?

mouseover는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생하지만 mouseenter는 오로지 자기 자신에게 마우스 포인터가 와야만 발생합니다.
참고 자료

<script>
$("이벤트 대상 선택").on("mouseenter", function() {
	코드;
});

$("이벤트 대상 선택").on("mouseleave", function() {
	코드;
});
</script>

mousemove()

선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트 발생.

<script>
$("이벤트 대상 선택").on("mousemove", function() {
	코드;
});
</script>

mousemove 이벤트가 발생할 때마다 마우스 포인터의 좌푯값을
각각 <span>에 출력하는 예제.

<script>
$(function( ) {
	$(document).on("mousemove", function(e) { // e는 매개변수(이벤트 객체)
		$(".posX").text(e.pageX);
		$(".posY").text(e.pageY);
	});
});
</script>
</head>
<body>
<p>X : <span class="posX">0</span>px</p> <!-- X: 좌푯값px -->
<p>Y : <span class="posY">0</span>px</p> <!-- Y: 좌푯값px -->
</body>

키보드 이벤트

키를 누르거나 뗐을 때 이벤트 발생.

메소드	설명
keydown()	모든 키를 누르면 이벤트 발생(한글 키 제외)
keyup()	키를 눌렀다 떼면 발생
keypress()	기능 키 제외, 키를 누르면 이벤트 발생(F1~12, Tab, Shift 등)

<script>
$("이벤트 대상 선택").keydown(functiont() { // 작성 방식 전부 동일
	코드;
});
</script>

입력 양식 이벤트와 관련된 메소드

포커스 이벤트

포커스는 <a> 또는 <input> 태그를 클릭하거나 Tab 키를 누르면 생성됩니다.
키보드 접근성을 높이기 위해, 마우스 이벤트를 등록할 때 <a>, <input> 태그에 등록 하면 좋습니다.
마우스가 없는 사용자도 고려하면 좋으니까요.

focus() blur()

focus(): 대상 요소로 포커스가 이동하면 이벤트 발생
blur(): 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트 발생

<script>
$("이벤트 대상").on("focus", function(){
	코드;
});

$("이벤트 대상").on("blur", function(){
	코드;
});
</script>

focusin() focusout()

focusin(): 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트 발생
focusout(): 대상의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생

<script>
$("이벤트 대상").on("focusin", function(){
	코드;
});

$("이벤트 대상").on("focusout", function(){
	코드;
});
</script>

키보드로 마우스 이벤트 대응하기

키보드 접근성이란? 어떤 대상 요소에 마우스 이벤트를 등록했을 때 키보드로 대상 요소를 사용할 수 있게 하는 것을 말합니다.

다음과 같이 마우스 이벤트가 등록되었을 때는 반드시 키보드로 작동할 수 있게 대응 이벤트를 함께 작성해야 합니다.

마우스 이벤트	키보드 이벤트
mouseover	focus
mouseout	blur

예시

<script>
$("#btn").on("mouseover focus", function(){ // 버튼에 포커스 하면 텍스트가 숨겨짐
	$(".text").hide();
})
</script>

요소의 영역

요소의 크기

메소드	반환값
.width()	요소의 너비
.height()	요소의 높이
.innerWidth()	요소의 너비 + 패딩(padding)의 너비
.innerHeight()	요소의 크기 + 패딩(padding)의 높이
.outerWidth()	요소의 너비 + 패딩의 너비 + 테두리(border)의 크기
.outerHeight()	요소의 높이 + 패딩의 높이 + 테두리(border)의 높이
.outerWidth(true)	요소의 너비 + 패딩의 너비 + 테두리의 너비 + 마진(margin)의 너비
.outerHeight(true)	요소의 높이 + 패딩의 높이 + 테두리의 높이 + 마진(margin)의 높이

윈도우 객체 크기 알아내기

<script>
      console.log("모니터 해상도 너비:" + window.screen.width);
      console.log("모니터 해상도 높이:" + screen.height);
      console.log("모니터 화면의 작업 표시줄 제외 너비:" + screen.availWidth);
      console.log("모니터 화면의 작업 표시줄 제외 높이:" + screen.availHeight);

      console.log(`----------------`);
      console.log(`브라우저 전체 너비:` + outerWidth);
      console.log(`브라우저 전체 높이:` + outerHeight);
      console.log(
        `스크롤바 영역 포함 브라우저 내부 너비(순수 화면 사이즈):` +
          window.innerWidth
      );
      console.log(
        `스크롤바 영역 포함 브라우저 내부 높이:` + window.innerHeight
      );
     
      console.log(`**----------------`);
      // .clientWidth : width + padding
      console.log(
        `스크롤바 영역 미포함 브라우저 내부 너비:` +
          document.documentElement.clientWidth
      );

      // .body 바디 영역만 지칭 webkit 구버전에서 작동
      console.log(
        `스크롤바 영역 미포함 브라우저 내부 높이:` + document.body.clientHeight
      );
      console.log(
        `브라우저 내부 높이:` + document.documentElement.clientHeight
      );

      console.log(`----------------`);
      console.log(
        `스크롤바로 숨겨진 영역까지 포함한 컨텐츠 너비:` +
          document.documentElement.scrollWidth
      );
      console.log(
        `스크롤바로 숨겨진 영역까지 포함한 컨텐츠 높이:` +
          document.documentElement.scrollHeight
      );
    </script>

결과

제 컴퓨터는 맥북 pro 14, 1512x982입니다.

스크롤바 영역 포함 브라우저 내부 너비(순수 화면 사이즈) 는 개발자 도구를 켰기 때문에 좁아졌습니다.
스크롤바 영역 미포함 브라우저 내부 높이:1520 은 body 길이를 200vh로 제가 늘려놨기 때문입니다.

참고

요소의 위치

선택한 요소의 위치를 손쉽게 반환하고 설정 할 수 있는 메소드.

메소드	설명
.offset()	선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다.
.position()	선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다.

ofset()과 position()의 차이점

메소드	설명
.offset()	HTML 문서(HTML document)를 기준으로 함.
.position()	선택한 요소가 웹 페이지에 위치할 때 기준이 되는 부모 요소를 기준으로 함.

참고

요소의 스크롤 위치

메소드	설명
.scrollLeft()	선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.
.scrollTop()	선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다.

참고

이벤트 객체와 종류

사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성됩니다.
이벤트 객체에는 이벤트 타입에 맞는 속성과 메서드가 포함되어 있습니다.

이벤트 객체를 생성하는 법

<script>
$("이벤트 대상 선택").mousemove(function(매개변수){
	매개변수.속성;
})
</script>

대표적으로 사용하는 속성은 아래와 같습니다.

구분	속성	설명
마우스 이벤트	pageX	브라우저 화면을 기준으로 한 마우스 X 좌표 위치
마우스 이벤트	pageY	브라우저 화면을 기준으로 한 마우스 Y 좌표 위치
전체 이벤트	preventDefault()	기본 이벤트를 제거한다.
전체 이벤트	stopPropagation()	이벤트 전달을 제거한다.
전체 이벤트	target	이벤트가 전파된 마지막 요소를 가리킴.

켄

저녁놀 마을 사람

이전 포스트

제이쿼리, 라이브러리 연동하기

다음 포스트