jineecode

event 본문

JS/jquery

event

지니코딩 2020. 12. 14. 13:48

0. 들어가기 전에...

function(){} 바깥에다 this를 찍어보면 어떻게 나올까?

this 는 윈도우를 가리킨다.

 

console.log(this);
$(function(){
	
});

 

function(){} 안에다 this를 찍어보면 어떻게 나올까?

this는 $(function(){}) = document.ready, 즉 document를 가리킨다.

 

$(function(){
	console.log(this);
});

 

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>event</title>
    <!-- jquery framework cdn -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="event.js"></script>
    <style>
      .box1 {
        width: 250px;
        height: 150px;
        background: yellow;
      }

      .box2 {
        width: 150px;
        height: 150px;
        background: red;
      }

      h2 {
        position: fixed;
        right: 50px;
        top: 50px;
        font-size: 50px;
      }

      h3 {
        position: fixed;
        right: 50px;
        top: 100px;
        font-size: 50px;
      }

      body {
        height: 3000px;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box1"></div>
    <p></p> -->
    <div class="box1"></div>
    <div class="box2"></div>
    <p></p>

    <h2>00</h2>
    <h3>00</h3>
  </body>
</html>

 

1. click event

$(function(){
	$(".box1").on("click", function(){
	$("p").text("클릭했습니다!")
  });
});


$(function(){
    $('.box1').click(function(){
    $("p").text("클릭했습니다!")
  });
});

 

2. mouseenter, mouseleave

  $(".box2").on("mouseenter", function(){
    $("p").text("마우스 오버!!")
  });

  $(".box2").on("mouseleave", function(){
    $("p").text("마우스 아웃!!")
  });

 

3. hover

$(Selector).hover(function(){}, function(){});

$(".box2").hover(function(){
$(".box2").css("background", "blue");
  },function(){
    $(".box2").css("background","red");
  });

 

4. scroll event

scroll event는 document(html)에서 잡아줄 수 없으므로 window 객체로 불러와야 한다.

  $(window).scroll(function(){
    let scroll = $(this).scrollTop();
    $("h2").text(scroll);
  });

 

5. resize event

 $(window).resize(function(){
    let wid = $(window).width();
    let hei = $(window).height();

    $("h2").text(wid);
    $("h3").text(hei);

  });

 

5-1. 박스1을 클릭했을 때, 박스2의 높이가 '박스1 가로의 크기'로 리사이즈 되게 하기.

$(".box1").click(function(){
    let box1wid = $(".box1").width()
    $(".box2").height(box1wid)
  });

 

6. mousemove event

 

  $(window).mousemove(function(e){
    let x = e.pageX; //x축 좌표
    let y = e.pageY; //y축 좌표

    $("h2").text(x);
    $("h3").text(y);
  });

'JS > jquery' 카테고리의 다른 글

filereader event  (0) 2021.01.04
animate  (0) 2020.12.14
attr method  (0) 2020.12.14
스크롤시 해당 섹션의 메뉴를 활성화 시키기(jquery편)  (0) 2020.12.11
요소의 위치 .offset() .position()  (0) 2020.12.11
'JS/jquery' Related Articles more
Comments