[JS] 이벤트

2022. 4. 27. 15:40·Stack/JavaScript

자바스크립트 기초구문

산술연산자, 논리연산자, 비교연산자, 조건문

 

자바스크립트 DOM

이벤트

onclick 클릭이벤트

onmouseenter 마우스를 올렸을 때

onmouseleave 마우스가 떠났을 때

onmousemove 마우스가 움직일 때

resize 창의 크기가 조절될 때

 

1. html 요소 태그안의 속성

<button onclick="myFunc()">

2. 이벤트 리스너

addEventListener() 메서드를 사용

document.querySelector('button').addEventListener("이벤트", myFunc);

document.querySelector('button').addEventListener("이벤트", function(){alert("aaa")};)

 


 

18event.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background: pink;
        }
        #a {
            width: 50px;
            height: 50px;
            background: tomato;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
            /* transition: 0.1s; */
        }
    </style>
</head>
<body>
    <button id="btn">클릭하세요</button>
    <div id="box"></div>
    <div id="a"></div>
    <script>
        // document.querySelector('#btn').onclick = eventOn; == 위에 버튼 옆에 onclick="eventOn()" 적는거랑 같음
        document.querySelector('#btn').addEventListener('mouseenter', eventOn);
        document.querySelector('#box').addEventListener('mousemove',function(e){
            document.querySelector('#a').style.left=`${e.pageX}px`;
            document.querySelector('#a').style.top=`${e.pageY}px`;
            console.log(`x좌표는 ${e.pageX}이고, y좌표는 ${e.pageY}이다.`);
        });
        function eventOn(){
            console.log('이벤트가 발생했습니다.');
        }
        window.addEventListener('resize',function(e){
            console.log(e);
            // console.log(e.target.innerWidth);
            // console.log(e.target.innerHeight);
            let wwid = window.innerWidth;
            let whei = window.innerHeight;
            document.querySelector('#box').style.width=`${wwid}px`;
            document.querySelector('#box').style.height=`${whei}px`;
        })
    </script>
</body>
</html>

'Stack > JavaScript' 카테고리의 다른 글

[JS] 조건문 2  (0) 2022.04.28
[JS] click 실습  (0) 2022.04.27
[JS] input / input_if 예제  (1) 2022.04.27
[JS] 조건문  (0) 2022.04.27
[JS] 함수  (0) 2022.04.26
'Stack/JavaScript' 카테고리의 다른 글
  • [JS] 조건문 2
  • [JS] click 실습
  • [JS] input / input_if 예제
  • [JS] 조건문
7ingout
7ingout
  • 7ingout
    Hello, 7ingout world!
    7ingout
  • 전체
    오늘
    어제
    • 분류 전체보기 (205)
      • Project (5)
      • Stack (173)
        • React (40)
        • JavaScript (50)
        • TypeScript (14)
        • HTML (11)
        • CSS (31)
        • Spring (9)
        • PHP (15)
        • SQL (3)
        • Python (0)
      • ETC (9)
      • Design (13)
        • Illustrator (6)
        • Photoshop (7)
      • Articloid (4)
        • 7ingout (4)
  • 공지사항

    • ☻
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
7ingout
[JS] 이벤트
상단으로

티스토리툴바