이벤트
- 우리가 이용하는 웹사이트에는 수많은 기능을 제공합니다. 특정 메뉴 버튼을 클릭할 때 정보가 노출되거나 반대로 정보를 입력하면 서버에 저장 기능 등 이러한 기능들이 없다면 웹페이지는 그냥 글자만 있는 전자문서와 다를게 없습니다. 주로 우리들은 이 웹페이제 있는 기능을 이용하기 위해서 마우스나 키보드를 조작하여 기능을 실행합니다. 바로 이러한 행위들을 이벤트라고 부릅니다.
핸들러
- 이벤트가 발생하면 특정 함수를 할당해서 실행할 수 있는데, 이것을 핸들러(Handler)라고 합니다.
- 핸들러 표현 방식 : on+이벤트 타입
- HTML DOM Event 종류 : https://www.w3schools.com/jsref/dom_obj_event.asp
HTML DOM Event Object
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이벤트 핸들러를 할당하는 방식
HTML : HTML태그요소에 직접 이벤트="핸들러" 할당
아래의 코드를 통해 보겠습니다.
<body>
<button onclick="alert('click')">클릭</button>
</body>위의 코드를 실행하여 버튼을 클릭했을때의 화면입니다.
HTML : HTML태그 요소에 직접 이벤트 = "함수"
<button onclick="sayHello()">클릭2</button>
<script>
function sayHello(){
alert("Hello");
}
</script>결과입니다.
버튼에 id를 주고 Handler 할당
핸들러 할당시 el.onclick=sayHello; 코드에서 함수()가 없어야합니다.(sayHello())
()가 있으면, 함수의 반환값이 할당됩니다. 즉 창을열자마자 alert창이 떠버럽니다.
이부분이 이해가 잘 가지않아 찾아봤습니다.
- el.onclick=sayHello;를 실행한경우에는 el.onclick에 함수자체(이름)를 넘겨줍니다. 호출한 결과값을 넘겨주는 것이 아닌, 이 함수를 그대로 넘겨줄테니 알아서사용해라! 정도로 이해하자 즉, 함수참조!
- el.onclick=sayHello();를 실행한경우에는sayHello라는 함수가 어떤 결과값을 반환하고, 이결과값 만을 el.onclick를 통해 넘겨주는 것이다. 즉, 함수호출!
<button id="btn">클릭3</button>
<script>
function sayHello(){
alert("Hello");
}
const el = document.getElementById('btn');
el.onclick=sayHello;결과화면입니다.
<script> : addEventListner() 사용
<button id="btn2">클릭4</button> // body
el2.addEventListener("click", sayHello); //scriptaddEventListener는 직접 작성하는 것도 가능합니다.
el2.addEventListener("click", ()=>{
alert("hi");
});
일부 이벤트는, 이벤트핸들러로는 작동 안하고,
항상 addEventListener(이벤트, 직접함수작성) 으로 처리해줘야 작동하는 경우가 있습니다.
예시로 DOMContentLoaded()가 있습니다
위의 이벤트는 문서로드가 완료되었을 때 발생되는 이벤트입니다.
document.addEventListener("DOMContentLoaded", ()=>{
document.body.style.backgroundColor="red";
});아래의 결과를 보면 잘 실행됨을 알 수있습니다.
아래의 코드를 실행하면 결과가 적용이 안됩니다.
document.onDOMContentLoaded = () => {
document.body.style.backgroundColor = "red";
};
그래서 가급적 addEventListener로 통일하는 것이 좋습니다.
추가적으로 이미 할당된 이벤트리스너를 removeAddEventListener()함수로 삭제할 수 있습니다.
document.removeEventListener("DOMContentLoaded", () => {
document.body.style.backgroundColor = "red";
});
참고
https://www.youtube.com/watch?v=J5EJija5-Sw&list=PLZKTXPmaJk8JVQv3XSNF8yJMdsxbFrO3S&index=5
'프론트엔드 > javascript' 카테고리의 다른 글
| 자바스크립트 DOM & EVENT # 이벤트버블링(Event Bubbling), 이벤트 위임(Event Delegation) (0) | 2023.05.01 |
|---|---|
| 자바스크립트 DOM & EVENT #5.2 이벤트 핸들러(Event Handler) (0) | 2023.04.30 |
| 자바스크립트 DOM&EVENT #4 CSS style, class 제어 (0) | 2023.04.26 |
| 자바스크립트 DOM&EVENT #3 노드생성,추가,복제,삭제 (0) | 2023.04.14 |
| 자바스크립트 - DOM & EVENT #2 부모,자식,형제 노드 (0) | 2023.04.13 |
