Visual Studio code events 활용

1. onclick events

<button onclick="fun1(this)">Click me</button>

  const fun1 = (ele1) => {
    console.log("클릭하셨네요");
    console.log("ele1 =", ele1)
  };

버튼 하나를 생성하고 , 한번 클릭하면 fun1(this)라는 메소드가 실행하도록 했다.

this는 위의 줄을 리턴한다는 것이다.

한번 클릭하면 "클릭하셨네요" 출력후

실행되었던 문구가 출력된다.

<h2 onclick="fun2('넘기는값이에요')">나도 클릭해보세요</h2>

  const fun2 = (str2) => {
    console.log("h2 클릭하셨네요");
    console.log("str2: ", str2)
  };

클릭하면

출력

 

 

2. onmouseover , onmouseout events

<div id="div1" onmouseover="fun3()" onmouseout="fun4()"></div>

  const fun3 = () => {
    console.log("왔네요");
  };
  const fun4 = () => {
    console.log("갔네요");

      #div1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }

커서를 대면 왔네요 출력 나가면 갔네요 출력

onmouseover = 커서가 닿으면 fun3 실행

onmouseout = 커서가 나가면 fun4 실행

 

 

 

3. onmousedown , onmouseup events

<div id="div2" onmousedown="fun5()" onmouseup="fun6()"></div>

  const fun5 = () => {
    console.log("눌렀다");
  };
  const fun6 = () => {
    console.log("뗐다");
  };

      #div2 {
        width: 100px;
        height: 100px;
        background-color: violet;
      }

보라색 칸을 누르면 눌렀다 출력 떼면 뗐다 출력

onmousedown = 커서를 대서 누르면 fun5 실행

onmouseup =  커서를 떼면 fun6 실행

 

 

 

4. onkeydown , onkeyup events

<input type="text" onkeydown="fun7()" onkeyup="fun8()" placeholder="입력해보세요"/>

  const fun7 = () => {
    console.log("키보드를 눌렀다");
  };
  const fun8 = () => {
    console.log("키보드를 뗐다");
  };

키보드를 입력하면 출력

 

이번엔 마우스가 아니라 키보드를 이용한 events다.

onkeydown = 키보드를 누르면 fun7 실행

onkeyup = 키보드를 떼면 fun8 실행

 

 

 

5. onblur events

<input type="text" onblur="fun9()" placeholder="입력해보세요">

  const fun9 = () => {
    console.log("절 떠나셨네요")
  }

입력하다가 다른곳으로 가면 출력

onblur = 다른 곳으로 가면 fun9 출력

 

 

이런 이벤트들을 이용하면 유용하게 쓸 수 있을 것 같다.