마우스이벤트(click(),dbclick(),mouseenter(),mouseleave())키보드이벤트(keypress(),keydown(),keyup())폼이벤트(focus(),blur(),change())문서윈도우이벤트(ready(),resize(),scroll())

FrontEnd/JQuery

by H_Develop 2022. 7. 13. 19:03

이벤트와 효과

마우스, 키보드, 폼, 윈도우(창) 등의 조작으로 인해 발생되는 이벤트를 제이쿼리로 처리하고,

페이지 요소들에 대해 숨기기(Hide), 페이드(Fade), 슬라이드(Slide), 그리고 애니메이션(Animation) 등,

다양한 효과를 주는 제이쿼리 메써드도 알아본다.

구분 메써드 설명

마우스 이벤트

click() 선택 요소의 클릭 이벤트 처리
dblclick() 선택 요소의 더블클릭 이벤트 처리
mouseenter() 선택 요소에 마우스 포인터가 들어갔을 때 발생되는 이벤트 처리
mouseleave() 선택 요소에서 마우스 포인터가 벗어났을 때 발생되는 이벤트 처리

( mouseover, mouseout은 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생하지만,

mouseenter, mouseleave는 오로지 자기 자신에게 마우스 포인터가 와야만 발생한다. )

키보드 이벤트

keypress() 키보드가 눌려졌을 때 발생되는 이벤트 처리
keydown() 키보드가 눌려지고 있을 동안 발생되는 이벤트 처리
keyup() 키보드가 눌려 졌다가 뗄 때 발생되는 이벤트 처리

폼 이벤트

focus() <input type="text"> 등 요소에 마우스 포커스가 될 때 발생되는 이벤트 처리
blur() <input type="text"> 등 요소에 마우스 포커스가 되어 있다가 없어졌을 때 발생되는 이벤트 처리
change() <input>, <select> 등 요소에서 값이 변경되었을 때 발생되는 이벤트 처리

문서/윈도우 이벤트

ready() 문서 객체 모델(DOM)의 요소들이 모두 로드 되었을 때 발생되는 이벤트 처리
resize() 브라우저 창의 크기가 변경되었을 때 발생되는 이벤트 처리
scroll() 스크롤 바를 움직였을 때 발생되는 이벤트 처리

click()

<script>
  $(function(){
    $("#btn").click(function(){
    $("#show").text("안녕하세요")  // event handlerr
  });
});      
</script>
<style>
  #btn { width : 150px; height: 70px;}
</style>
</head>	
<body>
    <button id="btn">클릭!</button>
    <p id="show"></p>
</body>

dbclick()

<script>
  $(document).ready(function(){
    $("#btn1").click(function(){
    $("#show").text("클릭했습니다.")
  });   
  $("#btn2").dblclick(function(){
    $("#show").text("더블 클릭했습니다.")
  });   
    $("#box").mouseenter(function(){
    $("#show").text("마우스 포인터가 들어왔습니다.")
  });
  $("#box").mouseleave(function(){
    $("#show").text("마우스 포인터가 벗어났습니다.")
  });
});   
</script>
<style>
    div { border : solid 2px blue;}
    #box { width : 200px; height: 30px; margin-top:10px; background-color:yellow;
    text-align:center; line-height: 30px;}
    #btn1 {width : 100px; height: 30px; }
    #btn2 {width : 100px; height: 30px; }
</style>
</head>	
<body>
    <button id="btn1">클릭</button>
    <button id="btn2">더블 클릭</button>
    <div id="box">마우스를 위한 div 요소</div>
    <p id="show"></p> 
      <!--위에서 show 지정자가 text () 메시지를 보이므로 <p> ~ </p>로 처리-->
</body>

keypress(), keydown(), keyup()

<script>
  $(document).ready(function(){
    $("p:eq(0) input").keydown(function(){   //키보드가 눌려지고 있을 동안 발생되는 이벤트 처리
    $(this).css("background-color","yellow") // this는 위에서 선택한 p:eq(0)이다.
  });
  $("p:eq(0) input").keyup(function(){      //키보드가 눌려졌다가 뗄 때 발생되는 이벤트 처리
    $(this).css("background-color","pink")
  });   
    $("p:eq(1) input").keypress(function(){//키보드가 눌러졌을 때 발생되는 이벤트 처리
    $(this).css("background-color","skyblue")
  });
});
</script>
<style>
    #box { width : 200px; height: 30px; margin-top:10px; 
        background-color:yellow;
    text-align:center; line-height: 30px;}
</style>
</head>	
<body>
    <p> - 아이디 : <input type="text"></p>
    <p> - 비밀번호 : <input type="password"></p>
</body>

focus(), blur(), change()

<script>
  $(document).ready(function(){
    $("input").focus(function(){ 
    $(this).css("background-color","yellow")
  });
  $("input").blur(function(){     
    $(this).css("background-color","pink")
  });   
  $("select").change(function(){
    $("#show").text("선택 박스의 값이 변경되었습니다.")
  });
});
</script>
<style>
    #box { width : 200px; height: 30px; margin-top:10px; 
        background-color:yellow;
    text-align:center; line-height: 30px;}
</style>
</head>	
<body>
    <p> - 아이디 : <input type="text"></p>
    <select>
        <option>2020</option>
        <option>2021</option>
        <option>2022</option>
        <option>2023</option>
        <option>2024</option>
    </select>
    <p id="show"></p>
</body>

focus() : input box에 클릭을 하면, yellow로 바뀌며,

blur() : input box에 클릭하고, 다른 곳을 클릭하면 포커스를 벗어나 pink 로 바뀐다.

change() : option의 default값을 변경하면 text()가 나온다.

resize()

<script>
  $(document).ready(function(){
    $(window).resize(function(){ 
    $("span:eq(0)").text("너비"+ window.innerWidth+"px");
    $("span:eq(1)").text("높이"+window.innerHeight+"px");
    // 브라우저 창의 너비와 높이
  });
});
</script>
<style>
    p { border:solid 2px blue;}
</style>
</head>	
<body>
    <p>브라우저 창 크기 : <br><span></span> <br> <span></span></p>
</body>

scroll()

<script>
  $(document).ready(function(){
    $(window).scroll(function(){ 
    $("#show").text("스크롤바가 이동되었습니다.");
  });
});
</script>
<style>
    div { border:solid 2px blue; padding: 10px 0 10px 10px;}
</style>
</head>	
<body>
    <div style = "width:2500px; overflow:auto; 
    background-color:yellow;">
        희망은 가난한 사람들의 빵이다.<br>
        발 없는 말이 천리간다.<br>
        피는 물보다 진하다.
        </div>
        <p id="show"></p>
</body>

overflow

자식요소가 부모요소의 범위를 초과 할 때, 어떻게 할지 결정할 수 있음.

속성

visible : 특정 요소가 박스를 넘어가도 그대로 보임.

hidden : 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리

scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않고, 사용자가 확인 할 수 있도록 스크롤바를 표시.

auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시.

'FrontEnd > JQuery' 카테고리의 다른 글

JQuery ( show(), hide(), toggle(), fadeIn(), fadeOut(), fadeTo(), fadeToggle(), slideUp(), slideDown(), slideToggle() ) (0)	2022.07.14
JQuery ( on() ) (0)	2022.07.13
parent(), find(), siblings() (0)	2022.07.12
JQuery Selector ( 기본 선택자, 필터 선택자, 전체 선택자 ) (0)	2022.07.12
JQuery ( addClass(), removeClass(), css() ) (0)	2022.07.12