2022-03-07 BOM / Event

오늘은 javascript의 BOM과 Event에 대한 공부를 했다.

BOM

BOM (Browser Object Model)

• 객체 모델이라고 한다.
• 브라우저의 정보나 URL 정보, 모니터화면정보 등을 취득하거나 제어할 수 있는 객체이다.
• 브라우저의 객체의 하위 객체로 document, location, screen, history, navigator등이 있다.

필자가 공부한 내용들만 찔끔 정리해보겠다.

window.open

const btn1 = document.querySelector("#btn1");
btn1.onclick = function(){
    //window.open(param1,param2,param3);
    //param1 : 주소(빈창에서 열린 주소)
    //param2 : 열릴방식 or 이름
    //param3 : 옵션
    window.open("http://www.naver.com","_blank","width=500, height=500");
};

버튼을 넣어놓은 상태인데, 그 버튼을 누르면 네이버 창이 500 / 500의 사이즈로 띄워지게 만들었다.

setTimeout

const btn2 = document.querySelector("#btn2");
let timeoutId;
btn2.onclick = function(){
    //window.setTimout(param1,param2)
    //param1 : 동작할 함수
    //param2 : 시간(ms)
    timeoutId = window.setTimeout(function(){
        alert("짠!!!!!");
    },1000*3);
    //1000 = 1초
}

버튼을 누르면 지정한 시간 뒤에 설정해놓은 함수가 동작하도록 만드는 기능이다.
1000이 1초를 뜻한다.

clearTimeout

const btn3 = document.querySelector("#btn3");
btn3.onclick = function(){
    window.clearTimeout(timeoutId);
}

setTimeout을 종료하는 함수이다. 실행하면 실행되고있던 setTimeout이 멈춘다.
멈추려면 실행되고있는 setTimeout의 리턴값을 매개변수로 넣어줘야한다.

setInterval

const btn4 = document.querySelector("#btn4");
let IntervalId;
btn4.onclick = function(){
    const p1 = document.querySelector("#p1");
    IntervalId = window.setInterval(function(){
        const date = new Date();
        const currentTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
        p1.innerText = currentTime;
    },1000);
}

지정한 시간마다 setInterval안의 설정해놓은 함수가 동작하도록 만들어주는 함수이다.
위의 코드는 1초마다 한번씩 현재시간의 시/분/초를 출력하는 코드이다.

clearInterval

const btn5 = document.querySelector("#btn5");
btn5.onclick = function(){
    window.clearInterval(IntervalId);
}

setInterval을 종료하는 함수이다. 실행하면 실행되고있던 setInterval이 멈춘다.
멈추려면 실행되고있는 setInterval의 리턴값을 매개변수로 넣어줘야한다.

onload

 window.onload = function(){
 	내용
 }

onload는 html의 요소들이 전부 로드된 후에 자동으로 실행되는 함수이다.

Event

고전이벤트 모델 : 요소의 이벤트 속성에 함수를 연결
인라인 이벤트 : 요소 작성시 내부에 작성
표준 이벤트 모델 : w3c에서 공식적으로 지정한 이벤트 모델

고전 이벤트

• 요소객체가 가지고있는 이벤트 속성에 이벤트 핸들러를 연결하는 방법
• 이벤트를 제거할 때는 속성값에 null을 대입
• 이벤트 발생 객체는 핸들러 내부에서 this로 표현
• 매개변수로 이벤트 정보 전달(window.event)

const btn1 = document.querySelector("#btn1");
console.log(btn1.onclick);
btn1.onclick = function(){
    console.log("고전이벤트 모델1");
}

아까부터 사용하고있던게 고전 이벤트 모델이다.

var 변수 = document.getElementById('아이디명');
변수.onclick = function(){
	수행기능 설정;
}

위와같이 사용할 수 있다. 더 다양한 선택자와 다양한 변수,이벤트를 사용할 수 있다.

인라인 이벤트

• 요소 내부에 이벤트를 작성하는 방법
• 인라인 방식은<script 태그에 있는 함수를 호출하는 방식으로 주로 사용된다.
• 짧은 경우 그냥 인라인 내부에 쓰기도한다.

<div onclick=‘처라 로직’></div>
<div onclick=‘스크립트 내 함수 호출’></div>

의 방법으로 사용한다.

표준 이벤트

• W3C에서 공식적으로 지정한 이벤트 모델이다.
• 한번에 여러가지 이벤트핸들러를 설정 가능하다.
• this 키워드가 이벤트 발생객체를 의미한다.

btn3.addEventListener("click",function(){
    console.log("표준 이벤트 모델1")
})

btn3.addEventListener("click",function(){
    console.log("표쥰이벤트모델2")
});

2번째 포인트가 고전 이벤트와 가장 큰 차이점을 보인다고 할 수 있다.
고전 이벤트는 onclick등을 사용하면 다른 같은 선택자내에서 onclick을 사용하지 못하지만
표준 이벤트는 여러가지 이벤트 핸들러를 설정하는 것이 가능하다.
btn3을 누르면 두개의 함수가 모두 실행되는 것 이다. 고전 이벤트는 이게 안된다.

정리가 끝났다! 고생은 별로 안했다! 내일 또 오자! 안녕~