Step02_event
- 이벤트 처리를 할 때 기존에 많이 쓰던속성은 웹브라우저에 빌트인되는 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 - 너무너무 어려움
-
위의 div에 "mousedown" 이벤트가 일어나면 div의 배경색을 노란색으로 바꿔 보세요.
hint : .style.backgroundColor="색상"; -
위의 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) : 이벤트함수의 매개변수
- 위의 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 해서 탭 !
