> For the complete documentation index, see [llms.txt](https://westsilver.gitbook.io/study-script/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://westsilver.gitbook.io/study-script/nomad-script/vanillajs/dom/event.md).

# Event & Event handler

## Event & Event handler

> **Event**란? 웹 사이트에서 발생 하는 것들 (click, resize, submit...)
>
> JavaScript는 **이벤트를 중간에 가로챌 수 있음**

## querySelector!

### 예시 1) 윈도우 창의 Resize 이벤트

```javascript
const title = document.querySelector("#title");

function handleResize(){
    console.log("I have been resized");
}

window.addEventListener("resize", handleResize); 
//중요!! 윈도우 사이즈가 변경 될 때! 그럴 때, handleResize 호출하자!
//() 쓰지 않는 것이 좋음 / 함수를 바로 즉시 호출하지 않는다는 의미!

//window.addEventListener("resize", handleResize());
//자동 호출
```

{% hint style="info" %}
**addEventListener() :** 지정한 이벤트가 대상에 적용 됐을 때, 호출할 함수를 설정하여 실행시켜 줌

**target(대상) :** Element, Document, Window\...
{% endhint %}

### 예시2) 윈도우 창의 event 매개변수

* **event 매개변수**는 JavaScript로 부터 온 것
* 이벤트를 다룰 함수를 만들 때마다, JavaScript는 자동적으로 함수를 객체에 붙여줌
* 이벤트가 발생할 때마다 이벤트 객체가 호출
* 폼을 만들거나 링크를 클릭할 때 유용함

```javascript
const title = document.querySelector("#title");

function handleResize(event){
    console.log(event);
}

window.addEventListener("resize", handleResize); 
```

### 예시 3) title의 Click 이벤트

```javascript
const title = document.querySelector("#title");

function handleClick(){
    title.style.color = "red";
}

title.addEventListener("click", handleClick);
//title을 클릭하면 글자의 색상이 red로 변경됨
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://westsilver.gitbook.io/study-script/nomad-script/vanillajs/dom/event.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.