javascript: event

javascript: event

2021. 1. 7. 11:19ㆍ프론트엔드/JavaScript

event

이벤트 입력 방법 3가지

1. html 태그 object에 입력

<태그 이벤트종류="자바스크립트코드;" >

2. 태그 object에 이름을 준 후 스크립트에서 입력

<태그 id="아이디명">

<script>
var 변수명 = document.getElementById("아이디명");
변수명.이벤트종류=function(){
 스트립트 코드
}
</script>

3. 이벤트리스너

변수명.addEventListener("이벤트종류",function(e){})

-리스너 함수

이벤트의 종류 e.type
좌표값 x=e.clientX y=e.clientY
이벤트 대상 e.target

마우스 이벤트

- onclick

- ondblclick

- onmouseover

- onmouseout

- onmousedown

- onmouseup

- onmousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>69-마우스이벤트</title>
    <style>
        body{height:1000px}
        button {
            padding: 10px;
            margin: 5px;
            font-size: 20px;
            background: white;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
    <script>
        function bg() {  //예전 방식 ②
            var myBody = document.querySelector("body");
            myBody.style.backgroundColor = "pink";
        }

        //이벤트를 스크립트 안에서
        window.onload = function() {
            var btn2 = document.querySelector(".btn2");
            var btn3 = document.querySelector(".btn3");
            var btn4 = document.querySelector(".btn4");
            var btn5 = document.querySelector(".btn5");
            var btn6 = document.querySelector(".btn6");
            var btn7 = document.querySelector(".btn7");

            var mybody = document.querySelector("body");

            btn2.ondblclick = function() {
                mybody.style.backgroundColor = "skyblue";
            }

           btn3.onmouseover = function() {
                mybody.style["backgroundColor"] = "orange";
            }

            btn4.onmouseout = function() {
                mybody.style["background-color"] = "green";
            }

            btn5.onmousedown = function() { //눌렀을때
                mybody.style["background-color"] = "purple";
            }

            btn6.onmouseup = function() { //뗐을 때
                mybody.style["background-color"] = "yellow";
            }
            
            mybody.addEventListener("mousemove",function(e){ //최근 방식 ③
                //매개변수 e: event의 약자
                //console.log(e);
                
                //이벤트의 종류 e.type
                //좌표값 x=e.clientX y=e.clientY
                //이벤트 대상 e.target
                console.log(e.type);
                console.log("x: "+e.clientX+", y: "+e.clientY);
            })
        }
    </script>
</head>

<body>
    <button class="btn1" onclick="bg();">click</button> <!-- ①-->
    <button class="btn2">dblclick</button>
    <button class="btn3">mouse over</button>
    <button class="btn4">mouse out</button>
    <button class="btn5">mouse down</button>
    <button class="btn6">mouse up</button>
    <button class="btn7">mouse move</button>
</body></html>

키보드 이벤트

- onkeydown

- onkeyup

- onkeypress

document.addEventListener("keydown",function(e)){
          console.log(e);
}

포커스 이벤트

- onfocus

- onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>75-focus-event</title>
    <script>
        window.onload=function(){
            var uName=document.querySelector("#uName");
            var link=document.querySelector(".link");
            
            uName.onfocus=function(){
                this.style.backgroundColor="skyblue";
                this.value="";
            }
            
            uName.onblur=function(){
                this.style.backgroundColor="white";
                this.value="홍길동";
            }
            
            link.onfocus=function(){
                this.style.backgroundColor="pink";
                this.style.textDecoration="none";
            }
            
            link.onblur=function(){
                this.style.backgroundColor="white";
                this.style.textDecoration="underline";
            }
        }
    </script>
</head>
<body>
    <input type="text" value="홍길동" id="uName">
    <br>
    <a href="#" class="link">naver</a>
</body>
</html>

기타

- onload : 선택한 요소의 하위요소들이 모두 불려지면, ~

- onchange : 선택한 요소의 값이 변하면, ~

- onreset : reset 버튼이 클릭되면, ~

- onsubmit : submit 버튼이 클릭되면, ~

a의 기본 기능 막기

onclick 함수 안에 사용

        window.onload=function(){
            var link=document.querySelector('a');
            link.onclick=function(e){
                return false;
            }
        }

'프론트엔드 > JavaScript' 카테고리의 다른 글

자바스크립트 기본문법 이해하기 1( 객체, 메서드, 매개변수, 프로퍼티, 반환, 변수, 반복, 함수, 배열, while문, for문, for~in문) (0)	2021.02.15
javascript: 정규표현식 (0)	2021.01.11
javascript: dom 객체 (0)	2021.01.04
javascript: 브라우저 객체 (0)	2020.12.31
javascript: 문자열객체 (0)	2020.12.31

코딩하지아