ITWILL : 이벤트리스너와 이벤트핸들러, 브라우저객체모델, window객체전체

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 이벤트

브라우저에서 사용자가 취하는 모든 행동을 이벤트라고 한다

이벤트 :
- 브라우저에서 사용자가 취하는 모든 행동
- ex)button

이벤트리스너 :
- 이벤트 발생정보를 체크해서 해당 핸들러로 전달
- ex) onclick

이벤트핸들러 :
- 이벤트 발생시 특정 동작을 처리해주는 동작
- 자바스크립트 함수를 실행시켜서 작동한다 즉, js함수실행가능
- 태그의 스타일정보 변경가능
- ex) alert(‘버튼클릭’), open() 등등

보통을 keydown해서 keyup을 해야 즉, 키보드를 눌렀다가 떼면 데이터가 입력된다.
따라서 키이벤트를 처리할때는 keyup일때 이벤트를 걸어줘야 keydown일때보다 정확한 처리가 가능하다

<input type="button" value="버튼" onclick="alert('버튼클릭');"><br>
<input type="button" value="버튼2" ondblclick="alert('버튼더블클릭');"><br>
<input type="button" value="버튼3" onmouseover="alert('마우스오버');"><br>
<input type="text" name="txt" onkeyup="alert('키업!');"><br>

참고링크 : onmouseleave와 onmouseout의 차이점

2. 브라우저객체모델(BOM : Browser Object Model)

우리가 사용하는 인터넷브라우저안에 내장되어있는/포함되어있는 객체를 말한다.
특징

• 계층적구조 : 단계별로 표시할 수 있다.
  • 최상위레벨 : window객체
  • 그 아래레벨 : document객체, screen객체, location객체, history객체, navigator객체

정확한 구조를 표현한 문장인 window.document.write() 사용해야하지만 최상위 객체는 생략해서 document.write()로 사용한다.

3. window객체

브라우저 객체이 최상위 객체.
객체이기때문에 당연히 속성과 함수들을 가지고 있다.

• window.open(“url주소 “, “창이름(title태그와 동일한 기능)”, “옵션”); 새창열기

• window.location.href=’url주소’; 현재페이지에서 열기

• window.close(); 현재 창 닫기

• window.alert(); 알림 팝업창 열기

• window.confirm() : 팝업창을 열어서 확인/취소 버튼으로 Boolean 데이터를 받는 함수

• window.prompt(); 팝업으로 input창 열기

• window.setInterval(“자바스크립트실행문”,밀리초시간); 일정시간동안에 자바스크립트실행문을 실행하는 함수

window는 최상위객체이기때문에 window를 생략하고 사용할 수 있다.

1. 예시1 : window.open(), window.close(), window.location

<input type="button" value="새창열기" onclick="window.open('http://www.naver.com')">
<input type="button" value="현재페이지열기" onclick="location.href='http://www.naver.com'">

이렇게 input태그에 많은 내용이 들어가면 보안상의 위험이 있으므로 js에 넣어서 사용한다.
참고로 아래 코드에서 점점(..)은 상위폴더로 이동을 의미한다.

function winOpen(){
	open("http://www.naver.com") //window생략가능
}
<input type="button" value="새창열기" onclick="winOpen();">

function pageOpen2(){
	open("../JS2/Test5.html") //점점(..)은 상위폴더로 이동을 의미한다.
}

2. 예시2 : setInterval(()=>{js실행문}, 밀리초)

3초에 한번씩 숫자를 찍는 함수를 아래코드와 같이 만들수있다.
java에서 스래드와 비슷한 개념이다.

let i=0;
let inter = setInterval(() => { 
	console.log(i++)
}, 3000);  //3초에 한번씩 숫자찍기

clearInterval(inter); //변수에 담은 interval데이터를 clearInterval()함수로 멈출수있다.