이벤트

앞에서 배운 css의 onclick과 비슷한 JS의 기능이 있는데 바로 이벤트이다. 이벤트란 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것이다.

예를 들어 우리가 앞에서 배웠던 배경색을 바꾸어주는 버튼을 100개를 만들어달라고 한다. 그렇다면 우리는 모든 button태그에 onclick="함수()"를 추가해 주어야 할 것이다. 물론 젠코딩을 이용하는 방법도 있지만 이벤트를 이용하면 우리가 css작업을 할 때 처럼 간단하게 작업할 수 있다.

click

click은 말그대로 onclick의 기능과 동일하게 어떤 요소를 클릭했을 때, 작업을 수행하는 이벤트이다.
위의 경우, jQuery를 이용해서

$('button').click('button','배경색을 빨간 색으로 바꾸는 함수');

만 작성해주면 모든 버튼에 대하여 아무 버튼을 클릭해도 onclick속성을 사용한 것처럼 배경색이 바뀌게 된다.

---

위의 click이벤트를 사용해서 버튼을 누르면 팝업 창이 나오고 팝업 창 안의 X표시를 누르면 팝업 창이 닫히는 코드를 구현해보자.

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--jQuery라이브러리 사용을 위한 링크-->

<!--팝업창-->
<div class="popup">
    <button class="popup__bt-close">X</button>
 </div>

<!--container-->
<div class="con">
  <button class="popup__bt-open">팝업 1</button>
  Lorem.../* <- * 50 생략 */
</div>

css

.con{
  width:1000px;
  margin:0 auto;
}
/*container의 너비를 설정하고 가운데정렬해준다.*/

.popup{
  border:10px solid black;
  width: 300px;
  height:300px;
  background-color:white;
  position:fixed;
  /*스크롤을 내려도 팝업창의 위치는 그대로 가운데여야하기 때문에 position값을
  absolute대신에 fixed를 사용한다.fixed -> 고정*/
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  /*중앙 정렬*/
  box-shadow:10px 10px 50px rgba(0,0,0,0.8);
  display:none;
  /*버튼을 누르기 전 기본상태는 안보여야 하므로 display:none;으로 해준다.*/
}

.popup__bt-close{
  display:block;
  margin-left:auto;
  }

JS

console.clear();

function popup__open_function(){
 $('.popup').css('display','block');
}
//실행하면 팝업창(.popup)의 display속성을 block으로 만드는 함수

function popup__close_function(){
 $('.popup').css('display','none');
}
//실행하면 팝업창(.popup)의 display속성을 none으로 만드는 함수

$('.popup__bt-open').click(popup__open_function);
//팝업 1(.popup__bt-open) 버튼을 누르면 팝업창(.popup)의 display속성을 block으로 만드는 함수를 실행한다.
$('.popup__bt-close').click(popup__close_function);
//X(.popup__bt-close) 버튼을 누르면 팝업창(.popup)의 display속성을 none으로 만드는 함수를 실행한다.

mouseenter, mouseleave

mouseenter는 마우스가 요소에 들어갔을 때, 작업을 수행하는 이벤트이고
mouseleave는 마우스가 요소에 안에서 떠날 때, 작업을 수행하는 이벤트이다.
위 JS코드의 click이벤트를 이 mouseenter, mouseleave로 바꾸어보자.

JS

console.clear();

function popup__open_function(){
 $('.popup').css('display','block');
}
//실행하면 팝업창(.popup)의 display속성을 block으로 만드는 함수

function popup__close_function(){
 $('.popup').css('display','none');
}
//실행하면 팝업창(.popup)의 display속성을 none으로 만드는 함수

$('.popup__bt-open').mouseenter(popup__open_function);
//팝업 1(.popup__bt-open) 버튼에 커서가 들어가면 팝업창(.popup)의 display속성을 block으로 만드는 함수를 실행한다.
$('.popup__bt-close').mouseleave(popup__close_function);
//X(.popup__bt-close) 버튼에서 커서가 나오면 팝업창(.popup)의 display속성을 none으로 만드는 함수를 실행한다.