javascript Step02_event

Step02_event

• 이벤트 처리를 할 때 기존에 많이 쓰던 onXXX=""속성은 웹브라우저에 빌트인되는 global변수가 만들어지기 때문에 바람직한 방법이 아니다.
  하나의 페이지를 여러명이서 작업할 때 동일한 영역에서 변수명이 겹칠 우려도 있고, 콘솔창에서 접근해 임의변경이 가능한 부분도 있기 때문

-> 새로운 방법 !
이벤트 함수를 이용하기

addEventListener ( “xxx”, function( ){ } )

-> 함수를 호출하면서 함수를 전달(동작을 전달)하는 구조

"xxx": 이벤트명 , click, mousedown, mousemove, mouseover, focus, submit, blur, ...
function( ){ } : 그 이벤트가 일어났을 때 실행할 함수

형식 : document.querySelector("요소명").addEventListener("이벤트명", function(){};

기존 global변수(함수)를 이용할 때

        let clicked=function(){
            alert("버튼을 눌렀네요 ?");
        };

global변수 x, id가 myBtn인 요소에 "click"이라는 이벤트가 일어났을 때 호출될 예정인 함수 등록하기

        document.querySelector("#myBtn").addEventListener("click", function(){
            alert("버튼을 눌렀네요 ?");
        });

*** 작동과정이 어려움, 잘 이해하기 !

*** 헷갈리기 시작

function useFunc을 실행하면
그 자리에 다시 b(); , 즉 useFunc의 함수가 실행된 값이 들어간다

이렇게 함수는 함수를 호출할 뿐 아니라 다시 함수를 불러올수도 있다

함수를 전달 -> 함수의 참조값을 전달

Step02_event2 - 너무너무 어려움

1. 위의 div에 "mousedown" 이벤트가 일어나면 div의 배경색을 노란색으로 바꿔 보세요.
   hint : .style.backgroundColor="색상";

2. 위의 div에 "mouseup" 이벤트가 일어나면 div의 배경색을 흰색으로 바꿔 보세요.

          document.querySelector("#myDiv").addEventListener("mousedown", function(){
              document.querySelector("#myDiv").style.backgroundColor="yellow";
          });
   
          document.querySelector("#myDiv").addEventListener("mouseup", function(){
              document.querySelector("#myDiv").style.backgroundColor="white";
          });
          

이까진 쉬움

function(e) : 이벤트함수의 매개변수

3. 위의 div에 "mousemove"이벤트가 일어날 때 마다 해당 마우스의 좌표를 div의 innerText로 출력하도록 해보세요.
   출력형식 => x좌표: 100, y좌표: 200

        document.querySelector("#myDiv").addEventListener("mousemove", function(e){
            console.log(e);
            let info="x좌표: "+e.offsetX+", y좌표: "+e.offsetY
            document.querySelector("#myDiv").innerText=info;
        })

콘솔창 object 내에 보면

screenX, screenY : 모니터 내에서의 좌표
pageX, pageY : 웹브라우저 내에서의 좌표
offsetX, offsetY : div 내에서의 좌표 (가장 작은 값)

• 작동과정
  이벤트함수를 실행하면 이벤트에 대한 정보를 담고 있는 오브젝트가 함수의 인자로 함수매개변수에 전달됨
  function(e) <-- 함수인자 받을준비, 실행하면 오브젝트로 저기에 전달됨 (함수를 인자로 전달받는 함수)

매개변수 e로 두고 console.log(e)찍으면 콘솔창에 e가 받은 object 값을 다 보여주고 있음

• 추가설명

// 이 함수는 함수를 인자로 전달받는 함수다
        function useFunc(f){
            let obj={name:"김구라", x:100, y:200};
            // 함수 안에서는 1)인자로 전달받은 함수를 호출하면서 2)object를 하나 전달한다.
            f(obj);
        }

-> 매개변수가 있는 함수는 함수를 인자로 전달받는 함수 !! 그 매개변수를 호출하면서 함수 안의 object를 전달하기로 약속
그 오브젝트를 받아야할 준비를 해야함 -> 새로운 매개변수 e
매개변수의 이름은 마음대로 지을 수 있다, just object가 전달되는 역할

        // 2. 위의 함수를 사용하는 사용자 입장에서 생각해 보자
        useFunc(function(e){     // e : 함수 호출하면서 전달한 값 f(obj);을 전달받을 매개변수 (새롭게 지정)
            console.log("내가 전달한 함수가 사용되네?")
            console.log(e);
            console.log(e.name);

        })

재정리

-> 맞는지 모르겠지만 일단 정리 ,, 나중에 다시 고쳐야징

(참고한것)
매개변수
함수를 호출할때 어떠한 데이터를 함수로 전달해줄수있다

function printFruit(name){ 2. 임의의 변수명 지어주면 이 변수의 이름으로 함수를 호출할 때(name) 전달받은 데이터(banana)를 사용하겠다
따라서 printFruit 내에 name이라는 변수명은 함수를 호출할때 전달받은 값이 들어가게 되므로
console.log(name); 3. <- 이 코드에서는 'banana'가 출력되게 된다
}
printFruit("banana"); -> 1. 함수를 호출할때 문자열 "banana"를 함수로 전달

쌤의 예시

동생은 이 함수 ! 형이 프로그래밍 해놓은 것

function useFunc 이 은행

지점장이 너를 찾을거야 : f(obj);

계약서 : {name:"김구라", x:100, y:200}

그 계약서는 동생에게 감 ( e: 동생의 왼손 혹은 오른손 – 어떻게 받든 동생마음 : 매개변수 이름은 내마음 ) ,
형이 시키는대로 함(e.name)

Step02_event3

10개의 div 중에서 클릭한 div의 innerText를 "Clicked!"로 변경하는 프로그래밍을 해보세요.

div가 여러개니까 반복문 필요(각각 다 이벤트가 걸려야 함),
반복문은 배열에서 쓰는 거니까 배열인 querySelesctorAll !!!

첫번째 방법

for (let i=0; i<10; i++){
            document.querySelectorAll(".box")[i].addEventListener("click", function(){
                document.querySelectorAll(".box")[i].innerText="clicked!"
            });
        }

반복문이 제일 먼저 !
i를 먼저 지정해 줘야 뒤에 i들을 갖다 쓸 수 있으니까

두번째 방법 - 이벤트를 걸어줄 div의 참조값을 배열에 담아오기

let divs=document.querySelectorAll(".box");

        for (let i=0; i<divs.length; i++){
            divs[i].addEventListener("click", function(){
            this.innerText="clicked!"
            });
        }

this라는 예약어는 이벤트가 일어난 바로 그 요소의 참조값을 가리킨다 !
여기서는 divs[i]를 가리킴 (divs의 i번째 참조값)

+) css요소
.box:hover
-클래스명이 box이면서 마우스가 올려져(hover) 있는 요소에 적용할 css

+)
순서대로 같은거 여러개 만들기
div.box{div$}*10 해서 탭 !