jQuery 이벤트 리스너
- 이벤트 리스너란?
- 이벤트가 발생했을 때 그 처리를 담당하는 함수이다.
- 여기서 이벤트란 클릭, 스크롤, 마우스오버 등의 여러 동작들을 의미한다.
- 이벤트 핸들러
- 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 event handler라는 함수를 통해 연결해야 한다. (event listener = event handler) 연결된 특정 요소에서 지정한 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.
- 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 event handler라는 함수를 통해 연결해야 한다. (event listener = event handler) 연결된 특정 요소에서 지정한 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.
- 이벤트를 연결할 때
.on()메소드를 사용한다..one()메소드는 연결된 이벤트 핸들러가 한 번만 실행된다.
▶️ 로딩 이벤트
- 기본적으로 html은 위에서 아래 순서로 읽힌다. 여기서
<script>가 상단인<head>태그에 위치해 있고,<script>에 사용되는 요소가 html문서의 하단<body>태그에 있다면? 상단에 위치한<script>부분은 실행될 수 없다.<head>만 읽힐 뿐<body>까지 읽히지 않기 때문에<script>에 사용되는 요소까지 접근이 안되는 것. 이럴 때 사용한다. - 아래 두개는 동일하게 동작한다. (문서를 html, body까지 로딩 후에 작성한 함수를 실행하라는 의미)
.ready()$(document).ready(function () { console.log($(".container")); });$()$(function () { console.log($(".container")); });
▶️ (this) 에 관해 알아보자!
- 이벤트를 발생시킨 요소에 대해 처리를 할 때 this를 사용한다.
- 일반 함수 (function)으로 사용해야 한다.
- 아래 예시로 보면 클릭을 한 부분이 this에 담기게 된다. 즉 실제 이벤트가 실행 됐을 때 이벤트를 당한 요소가 담기게 되는 것! 그 부분이 값으로 들어가게 된다.
$(".container").click(function () {
console.log(this);
$(this).css("background-color", "darkolivegreen");
});
//여기서 class="container"가 여러개라면 클릭을 한 부분의 값만 넘겨지게 되는 것.- 이렇게 담긴 this 값을 변수로 지정해 활용할 수도 있다. 아래 예시.
$("td").on("click", function () {
console.log(this); //클릭한 요소가 this의 값으로 넘어가게 되고, 해당 값을 출력.
$("#date").val(this.innerText);
date = this; //date 라는 변수의 값을 this값을 가져와 설정.
});
function addContents() {
date.append($("input[id=contents]").val());
}▶️ 마우스 이벤트
click():마우스를 클릭했을 때 발생.-
예시 1
<button id="btn">버튼을 클릭해보세요!</button> <p id="text"></p> <!--버튼을 클릭했을 때 텍스트 출력할 공간 만들어주기-->$(function () { $("body").on( //<body>요소에 이벤트 들어갈거다. { click: function () { //click이벤트가 발생했을 때 동작은 $("#text").html("버튼을 클릭했군요?"); //아이디가 text인 부분에 html 요소가 추가된다. }, }, "#btn" //아이디가 btn인 요소에 이벤트 핸들러를 등록하겠다. ); }); -
예시 2
<button>button</button> <input />$("button").click(function () { alert("click"); });
-
mouseover(): 마우스가 요소 안에 들어왔을 때 발생.<button>button</button> <input />$("input").mouseover(function () { alert("mouseover"); });//this 사용 $(".container").mouseover(function () { $(this).css("background-color", "slateblue"); });mouseout(): 마우스가 요소에서 나갔을 때 발생.hover(): 요소에 마우스가 올라왔을 때, 떠날 때 발생.-
예시 1 : hover 시 버튼 아래 텍스트가 추가
<button id="btnhover">버튼 클릭!</button> <p id="hovertext"></p>$(function () { $("#btnhover").hover(function () { $("#hovertext").append("마우스가 버튼 위로 왔다가 나갔어요"); }); }); -
예시 2 : hover시 .container에 텍스트 나타나기.
$(".container").hover( function () { $(this).html("<h2>hover 들어왔다</h2>"); }, function () { $(this).html("<h1>hover 나갔다</h1>"); } );
-
scroll(): 윈도우를 스크롤 할 때 발생.-
예시 1 : 스크롤이 바닥에 도달했을 때
//$(document).height() : document 의 높이를 구할 수 있다. //document의 높이 - window의 높이 = 현재 스크롤 위치를 알 수 있다. (아래로 내릴 스크롤이 얼마나 남았는지 확인 가능) //document는 바디, window는 브라우저로 생각 //$(document).height() - $(window).height() == (window).scrollTop() //이거는 결국 브라우저를 열었을 때 '아래로 내려야 하는 스크롤의 길이'에서 스크롤을 내리면 //'위로 올려야 하는 스크롤의 길이'가 동일해진다. (스크롤이 맨위, 맨 아래에 있을 때 남겨진 높이는 같기 때문) //이 부분을 활용하는 계산법. 즉 스크롤이 바닥에 도달했을 때 이벤트가 나타나게 되는 것. $(document).scroll(function () { if ( $(document).height() - $(window).height() == $(window).scrollTop() ) { console.log("스크롤 바닥에 왔다"); } }); -
예시 2 : 스크롤 위치에 따라 변경되게 설정.
<style> body { height: 1000px; } p { position: fixed; } </style> <h2>스크롤 테스트</h2>$(window).scroll(function () { if ($(document).scrollTop() < 10) { $("h2").css("backgroundColor", "green"); } else if ($(document).scrollTop() < 20) $("h2").css("backgroundColor", "orange"); else { $("h2").css("backgroundColor", "red"); } });
-
▶️ 키보드 이벤트
키보드 이벤트의 발생 순서 (도움 받은 링크)
- 키보드를 누른다. keydown 이벤트가 발생한다.
- 글자가 입력된다. keypress 이벤트가 발생한다.
- 키보드에서 손을 뗀다. keyup 이벤트가 발생한다.
keydown(): 키보드가 눌러질 때 발생.keyup(): 키보드가 떼어질 때 발생.$("input[name=pw]").keyup(function (event) { // console.log("key: ", event.key); if (event.key == "Enter") console.log("value: ", this.value); //여기는 input이 찍힐거고, input의 값이 찍히게 된다. if (event.keyCode == "13") console.log("value: ", this.value); //얘랑 위랑 똑같다. });- 키보드 이벤트 추가 예시
-
예시 1.
<body>에<input />를 넣어주고 아래 테스트. -
input 입력칸에 무언가 입력을 하면 console창에 각 정보가 뜬다.$("input").on("keyup", function (e) { //e를 입력했다면 console.log(e); //입력한 값에 대한 정보 console.log(e.key); //e 출력. console.log(e.keyCode); // e의 keycode인 69 출력. console.log(e.currentTarget); //현재 요소의 타겟이 어디인지. <input>출력. console.log(e.currentTarget.value); // 그 타겟의 값이 보여진다. e 출력. }); $("input").on("keydown", function (e) { console.log(e); console.log(e.key); console.log(e.keyCode); console.log(e.currentTarget); console.log(e.currentTarget.value); }); $; -
주로 쓰이는 키의 번호. (도움 받은 링크) keycode라고 한다.
$(window).keydown(function(e){ //13 : enter //27 : esc //37 : ← //38 : ↑ //39 : → //40 : ↓ //48~57 : left 0~9 //96~105 : right 0~9 if(e.keyCode==40||e.keyCode==39){ // ↓ 나 → 를 눌렀을 때 발생하는 이벤트 } if(e.keyCode==38||e.keyCode==37){ //↑ 나 ← 를 눌렀을 때 발생하는 이벤트 } if(e.keyCode==27){ close_guide(); } })
-
JavaScript 이벤트 리스너
요소.addEventListener(이벤트 타입, 핸들러)의 형태로 사용한다.- 선택한 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행시키는 메소드이다.
//boxE1에 EventListener 추가.
let boxE1 = document.querySelector(".box");
console.log(boxE1);
boxE1.addEventListener("click", function(){
alert("click 되었어요!");
})- jQuery와 다르게 요소를 정확히 지정해줘야 한다.
//이런 형태로 사용한다.
container[0].addEventListener("click", function () {
this.style.backgroundColor = "red";
});
//전체 요소에 적용하고 싶다면
for (let i = 0; i < container.length; i++) {
container[i].addEventListener("click", function () {
this.style.backgroundColor = "red";
});
}- jQuery의 on과 JS의 addEventListener의 차이점?
- 기본적으로 jQuery는 선택한 요소 전체에 적용시킨다. 동일한 class명을 가진 요소가 여러개 있다면 전체에 적용!
- JS의 addEventListener는 같은 상황이라면 제일 처음에 발견되는 하나의 요소에만 적용된다. 그렇기 때문에 addEventListener에서는 하나의 요소를 명확하게 선택해주어야 한다!
▶️ addEventListener 이벤트의 종류
click: 클릭했을 때- mouse 계열
mouseover: 요소에 커서를 올렸을 때mouseout: 마우스가 요소를 벗어날 때mousedown: 마우스 버튼을 누르고 있는 상태mouseup: 마우스 버튼을 떼는 순간
focus: 포커스가 갔을 때blur: 포커스가 벗어나는 순간- key 계열
keypress: 키를 누르는 순간 + 누르고 있는 동안 계속 발생keydown: 키를 누르는 순간에만 발생keyup: 키를 눌렀다가 떼는 순간
load: 웹페이지에 필요한 모든 파일 (html, css, js 등)의 다운로드가 완료 되었을 때. jQuery의.ready()와 비슷.resize: 브라우저 창의 크기가 변경 될 때scroll: 스크롤이 발생할 때unload: 링크를 타고 이동하거나, 브라우저를 닫을 때change: 폼 필드의 상태가 변경 되었을 때. 자주 쓰인다!- 예를 들어 비밀번호를 입력하는 창이 있다면. 처음에 1을 입력하고 input창에서 나온다. 그리고 다시 12를 입력하고 나온다. 그럼 최초의 값과 달라지게 된다. 이 때 이벤트가 실행된다.
프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆