<body>
<!--Event : 이벤트 객체(발생한 이벤트의 모든 정보)를 받을 때-->
<button onclick="arg1(event)">button 1</button>
<!--This : 이벤트가 발생된 당사자 정보를 받을 때(버튼 자체)-->
<button onclick="arg1(this)">button 2</button>
<!--둘 다 받을 수도 있다-->
<p><a href="#" onclick="arg2(event, this)">click 1</a></p>
<p><a href="#" onclick="arg2(event, this)">click 2</a></p>
</body>
<script>
function arg1(obj){
console.log(obj);
}
function arg2(evt, elem){ //evt, elem : 값에 임의로 지어놓은 이름('무엇이 들어올 것이다'를 명시/기능X)
console.log(evt);
console.log(elem);
console.log(elem.innerHTML);
}
</script>
Event Listener
특정 요소에 특정 이벤트를 감시하는 기능을 추가
잘 사용하지 않음(주로 속성으로 사용하기 때문)
속성에 추가한 이벤트 에서 on만 빠진 형태
</head>
<body>
<h4 id="msg">FOCUS NULL</h4>
<P><input type="text" id="txtinput"/></P>
<div id="eventZone"></div>
<h4>mouse position : <span id="pos"></span></h4>
</body>
<script>
//1단계 : 이벤트를 걸어줄 요소 가져오기
var txtinput = document.getElementById('txtinput');
var zone = document.getElementById('eventZone');
//2단계 : 리스너 추가(이벤트, 실행함수)
txtinput.addEventListener('focusin',fcin);
function fcin(){
console.log('focus in'); //이벤트가 잘 걸렸는지 확인
//3단계 : 핸들링할 요소 가져오기 -> 원하는 속성 가져오기
txtinput.style.backgroundColor = 'pink';
document.getElementById('msg').innerHTML = 'FOCUS IN';
}
//실행함수에 ()를 붙이지 않음 - ()를 쓸 경우 함수가 실행되기 때문
//실행하라는 것이 아니라 이벤트가 걸릴 경우 실행할 함수를 알려주는 것이므로
txtinput.addEventListener('focusout',fcout);
function fcout(evt){
//만약 이벤트 객체가 필요하다면 ()안에 넣어주기/ 이벤트가 발생하면 무조건 값을 넣어줌
console.log('focus out');
console.log(evt);
txtinput.style.backgroundColor = 'skyblue';
document.getElementById('msg').innerHTML = 'FOCUS OUT';
//skyblue로 색상 변경
//FOCUS OUT 출력
}
//딱 여기서만 쓸거면 익명함수를 쓰는 것이 좋다
txtinput.addEventListener('keyup',function(evt){
console.log(evt.keyCode); //keyCode 가져오기
if(evt.keyCode == 13){
console.log(txtinput.value + '전송');
}
})
zone.addEventListener('click',function(){
console.log('click');
zone.style.backgroundColor = 'orange';
})
zone.addEventListener('dblclick',function(){
console.log('double click');
//이벤트 리스너에서는 this 그냥 사용 가능
this.style.backgroundColor = 'yellow';
})
zone.addEventListener('mouseenter',function(evt){
console.log(evt);
//evt.target == this
evt.target.style.backgroundColor = 'blue';
})
zone.addEventListener('mouseout',function(){
console.log('OUT');
this.style.backgroundColor = 'yellowgreen';
})
document.addEventListener('mousemove',function(evt){
//console.log(evt.screenX + '/' + evt.screenY);
document.getElementById('pos').innerHTML = evt.screenX + '/' + evt.screenY;
})
</script>
Browser Object Model
브라우저(윈도우)를 모델로 봄
HTML과 Java Script는 Browser 안에서만 실행이 된다.
BOM은 DOM보다 한 단계 더 큰 개념이다.
Window Object
Window는 브라우저 “창”을 의미
window객체를 이용해 새로운 “window”를 “open” 할 수도 “close” 할 수도 있다.
open()
- open 함수는 새로운 윈도우 창을 생성 해 준다. 총 3개의 인자값을 갖는다.
- window.open(보여줄 페이지 주소,"창 이름","옵션"); //창이름은 잘 쓰지 않음
close()
- 열었던 새 창을 닫는 역할을 수행하는 함수
<body>
<button onclick="myWindow()">창열기</button>
<button onclick="closeWin()">창닫기</button>
</body>
<script>
console.log(window); //window는 브라우저를 의미
console.log(window.innerWidth + " / " + window.innerHeight);
var win;
function myWindow(){
console.log('window open!!')
//window.open(url,title,option);
//width / height : 창의 크기
//top / left : 창의 위치(left의 경우 1번 모니터를 기준으로 한다)
//resizable = no : 창크기 변경 여부(모든 브라우저에서 되지는 않음)
//scrollbar = no : 스크롤바 생성(일부 브라우저에서만 동작)
//창을 다루기 위해서는 변수에 담아야 한다
win = window.open('https://www.w3cschools.com','',
'width=400,height=400,top=500,left=500,resizable=no,scrollbar=no');
}
function closeWin(){
win.close();
}
</script>
location객체는 창을 이동시키거나 이동주소에 대한 정보를 제공해 준다.
window.location 이 정식 명칭이나 window 는 생략할 수 있다.
<body>
<li>location은 위치 정보를 얻어 올 때 사용</li>
<li>window.location.href</li> <!--윈도우 생략가능-->
<li>window.location.protocol</li>
<li>window.location.hostname</li>
<li>window.location.pathname</li>
<li>window.location.port</li>
<li>window는 생략 가능하다</li>
</ol>
<button>페이지 이동</button>
</body>
<script>
//서버환경에서 실행해야 된다
console.log('href : ',location.href); //현재 페이지가 존재하는 경로
console.log('protocol : ',location.protocol); //http or https
console.log('hostname : ',location.hostname); //네트워크 상에서 도메인
console.log('pathname : ',location.pathname); //도메인을 제외한 나머지 주소
console.log('port : ',location.port); //포트번호
var btn = document.getElementsByTagName('button');
console.log(btn);
btn[0].addEventListener('click',function(){
location.href='./03_event.html'; //이동하고 싶은 곳으로 이동(./ : 현재)
})
</script>
//부모창
<body>
<button>창열기</button>
<button>창닫기</button>
<br/>
자식창으로 보낼 데이터 : <input type="text" id="toChild"/>
<input type="button" value="보내기" onclick="sendVal()"/>
<br/>
자식창에서 보낸 데이터 : <input type="text" id="fromChild"/>
</body>
<script>
var win;
var btn = document.getElementsByTagName('button');
console.log(btn);
btn[0].addEventListener('click',function(){
win = window.open('./09_child.html','child','width=420,height=130');
})
btn[1].addEventListener('click',function(){
win.close();
})
function sendVal(){
//console.log('자식으로 데이터 보내기');
var val = document.getElementById('toChild').value;
win.document.getElementById('fromParent').value = val;
console.log(val);
}
function plus(a,b){
console.log('부모함수 plus 실행 : ',a+b);
}
</script>
//자식창
<body>
<h3>자식창</h3>
부모창에서 받아온 값 : <input type="text" id="fromParent"/>
<br/>
부모창으로 보낼 값 : <input type="text" id="toParent"/>
<input type="button" value="보내기" onclick="sendVal()"/>
</body>
<script>
function sendVal(){
console.log('부모에게 데이터 보내기');
var val = document.getElementById('toParent').value;
//opener == 부모 브라우저 창
opener.document.getElementById('fromChild').value=val;
opener.plus(10,20);
}
</script>
