power-girl0-0

이벤트 본문

언어/Javascript

이벤트

power-girl0-0 2021. 2. 10. 15:10
728x90

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)


이벤트란?

이벤트(event)는 어떤 사건을 의미한다.

브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 

<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert(window.location)" value="alert(window.href)" />
    <input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" />
</body>
</html>

onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다.

 

즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다.

이러한 방식을 이벤트 프로그래밍이라고 한다.


event target

target은 이벤트가 일어날 객체를 의미한다.

아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다.

<input type="button" onclick="alert(window.location)" value="alert(window.href)" />

event type

이벤트의 종류를 의미한다.

위의 예제에서는 click이 이벤트 타입이다.

그 외에도 scroll은 사용자가 스크롤을 움직였다는 이벤트이고, mousemove는 마우스가 움직였을 때 발생하는 이벤트이다.

 

이벤트의 종류는 이미 약속되어 있으므로, 아래 링크를 통해서 브라우저에 지원하는 이벤트의 종류를 참고 하면 된다.

https://developer.mozilla.org/en-US/docs/Web/Reference/Events


event handler

이벤트가 발생했을 때 동작하는 코드를 의미한다.

위의 예제에서는 alert(window.location)이 여기에 해당한다.

 

 

 

728x90

'언어 > Javascript' 카테고리의 다른 글

프로퍼티 리스너  (0) 2021.02.10
inline ( 인라인 방식 )  (0) 2021.02.10
문서의 기하학적 특성  (0) 2021.02.10
Text 객체  (0) 2021.02.10
Document 객체  (0) 2021.02.10
Comments