jQuery - event — 💻으니의 개발 공부용 블로그💻

jQuery cdn head에 넣음

셀렉터 html 복사해서 수정

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>jQuery - 셀렉터</title>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <style>
      body {
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        background: #f4f4f4;
        line-height: 1.5em;
      }
      header {
        background: #333;
        color: white;
        padding: 20px;
        text-align: center;
        border-bottom: 4px solid black;
        margin-bottom: 10px;
      }
      #container {
        width: 90%;
        margin: auto;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <header>
      <h1>jQuery 이벤트</h1>
    </header>
    <div id="container">
      <h3>Mouse Events</h3>
      <button id="btn1">Button 1</button>
      <button id="btn2">Button 2</button>
    </div>

    <script>
      $("#btn1").click(function () {
        alert("Button Clicked!");
      });
    </script>
  </body>
</html>

$("#btn1").click(function(){

alert('Button Clicked!");

});

= id btn1을 클릭하면 alert함수가 실행된다.

실행 결과

button1를 클릭하면 alert 창이 뜸

button2를 클릭하면 아무런 이벤트가 발생하지 않음.

원래 script 는 body태그 제일 하단에 쓰는데 , 아래와 같이 코드를 작성하면

script를 어디에 작성하던 HTML이 준비되면 해당 내용 실행함

    <script>
      //script 위치가 어디에 있든간에 웹문서가 다 준비되면 해당 내용 실행
      $(document).ready(function () {
        $("#btn1").click(function () {
          alert("Button Clicked!");
        });
        $("#btn2").click(function () {
          alert("Button2 Clicked!");
        });
      });
    </script>

button1을 누르면 해당 내용을 숨기고 button 2를 누르면 숨겨놓은 내용을 다시 보이게 만들어 보기

    <div id="container">
      <h3>Mouse Events</h3>
      <button id="btn1">Button 1</button>
      <button id="btn2">Button 2</button>
      <p class="para1">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem error
        unde consequatur. Nulla odit dolorum earum nobis recusandae rem
        accusantium officiis, quibusdam enim laudantium optio quod non vel,
        aliquam doloribus.
      </p>
    </div>

**** 참고 : p태그 안에 Lorem 을 입력하고 space + enter 누르면 랜덤한 문장 생성됨

$("#btn1").click(function () {

$(".para1").hide(); //display none

});

$("#btn2").click(function () {

$(".para1").show(); //display block

});

button 1 클릭하면 문장 출력, button 2를 클릭하면 문장 숨김 가능

이 두 가지 기능을 합친게 toggle()이다.

$("#btn1").click(function () {

$(".para1").toggle(); //show()와 hide()를 같이 사용 가능함

});

이벤트 객체 (event object)

이벤트 핸들러 함수는 jQuery에서 콜백될 때 이벤트 객체(event object)를 함수의 인자로 전달된다.

전달받은 이벤트 객체를 이용하여 이벤트의 특성을 결정하거나, 이벤트의 기본 동작을 막을 수도 있다.

화면에 마우스를 올리면 좌표를 출력하게끔 코드 작성

$(document).on("mousemove", function (e) {

$("#coords").text("Coords: Y:" + e.clientY + " X:" + e.clientX);

});

폼 input에 focus가 되면 background 색상 바뀌고 focus가 되지 않으면 원래의 색상으로 돌아가는 코드 작성

<form action="">
        <label>Name</label><br />
        <input type="text" id="name" name="name" />
        <br />
        <label>Email</label><br />
        <input type="email" id="emial" name="email" />
        <br />
        <label>Gender</label><br />
        <select name="gender" id="gender">
          <option value="mail">Male</option>
          <option value="femail">Female</option>
        </select>
        <br />
        <input type="submit" value="Submit" />
      </form>

script

$("input").focus(function () {

$(this).css("background-color", "pink"); //this 선택된 태그 객체

});

$("input").blur(function () {

//blur focus가 나가면

$(this).css("background-color", "white"); //this 선택된 태그 객체

name이나 email 작성 시 console.log에 출력

$("input").keyup(function (e) {

console.log(e.target.value); // keyup 시 콘솔에 값 출력하기

});

gender 선택 변경 시 alert창 출력하게 만들기

$("select#gender").change(function () {

alert("변경됐습니다!"); // 변경 시 alert창 출력

});

console log에도 변경된 성별 출력하게 만들기

$("select#gender").change(function (e) {

console.log(e.target.value); // 변경 시 console.log에 변경 값 출력

});

'FRONTEND > 기타' 카테고리의 다른 글

jQuery 를 활용해 AJAX 사용 load() (1)	2023.10.06
Dom 응용실습 (1)	2023.10.05
jQuery ? (1)	2023.10.05
id로 DB검색하여 결과 출력 (0)	2023.10.04
AJAX로 구구단 출력 (1)	2023.10.04

이벤트 객체 (event object)

'FRONTEND > 기타' 카테고리의 다른 글

티스토리툴바