이벤트란?
사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건’을 뜻합니다.
예를 들어 웹에서 발생하는 이벤트란 가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 매우 다양하게 제공되고 있습니다.
ex)
웹페이지 사용자가 버튼을 클릭했다, 클릭 이벤트!
웹페이지 사용자가 키보드를 눌렀다, 키다운 이벤트!
웹페이지 사용자가 입력 폼의 내용을 제출했다, 제출 이벤트!
등등...
이벤트 사용에 대한 예를 들어보겠습니다.
웹 사용자가 버튼(button) 요소를 클릭 했을 때,
alert 다이얼로그 박스를 띄워 환영의 메시지를 보여주고 싶다면 이것 클릭 이벤트로 작성할 수 있습니다.
<body>
<input type="text" placeholder="들어오실 준비 되셨나요?">
<button id= "push"> push </button>
<script src="./test.js"> </script>
</body>const handleClick = function(){ <!-- handleClick 이라는 상수에 일회성 함수를 지정합니다. -->
window.alert("환영합니다.") <!-- 함수 내용은 알림창을 띄우는 거예요. -->
}
const button = document.querySelector("#push") <!-- html에 작성된 id=push 버튼을 가져와 button 상수로 선언합니다. -->
button.onclick = handleClick <!-- 그리고 button 상수에 handleClick 이라는 함수롤 대입했어요.-->
여기에서 새롭게 사용된 onclick 에 대해서 조금 더 알아볼게요.
onclick
우리가 사용하는 노드에는 이벤트 관련 속성이 있습니다.
onclick 이 그에 해당합니다. (이벤트 관련 속성들은 대부분 on으로 시작합니다.)
onclick 은 버튼을 클릭했을 때 handleClick 함수 자체를 전달합니다.
이벤트가 발생할 수 있는(혹은 발생할 예정인) 타겟을 선택하고, 이벤트 핸들러 속성에 이벤트 핸들러를 대입합니다.
이벤트 핸들러를 등록하기 위해 이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 완전히 다르다는 것에 주의해야 합니다.
아래의 예제를 실제로 실행해볼게요.
<body>
<input type="text" placeholder="아무말 잔치집">
<button id= "push">push </button>
<p id = "text"> </p>
<script src="./script08.js"></script>
</body>document.querySelector("input[type='text']") // 속성 선택자
let button = document.getElementById("push")
button.onclick = function(){ //클릭 시의 동작을 지정(이벤트 핸들러, 이벤트 리스너, 이벤트 함수 )
alert("집중해!")
}
//function(){} 으로 일회성으로 사용하는 익명 함수 지정 가능
이벤트 핸들러(이벤트 리스너)
이벤트가 발생했을 때 그걸 처리하는 함수가 있습니다. 바로 이벤트 핸들러인데요.
각각의 이벤트들은 이벤트 핸들러(handler) == 이벤트 리스너를 가질 수 있습니다.
이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당 합니다.
즉 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러(혹은 리스너) 등록이라고 하는 거예요. 작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있습니다.
이벤트 핸들링 addEventListener
객체나 요소를 이벤트 리스너에 등록하는 것을 이벤트 핸들링이라 하는데 방법은 다음과 같습니다.
1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티 property로 등록하는 방법
(프로퍼티에 대한 간략한 설명은 아래 더보기를 참고해주세요.)
프로퍼티 property란 어떤 값을 나타내는데, 이 값이 다른 값과 연관되어 있을 때 property 라고 합니다.
const str = '문자의 수';
// 여기에서 str 문자열 객체의 length 프로퍼티를 출력한다.
console.log(str.length);
//출력되는 값은 3입니다.즉 형태는 다양하게 프로퍼티의 모습을 동작할 수 있는데, 이에 대한 자세한 내용은 타 블로그를 참고해주세요!
https://blog.naver.com/magnking/222574688894
인스턴스 프로퍼티(Instance property)와 정적 프로퍼티(Static property, Class propery)의 차이는? | Javascript
Javascript에서 class를 정의할 때 인스턴스 프로퍼티와 정적 프로퍼티를(클래스 프로퍼티) 정의할 수 있...
blog.naver.com
window.onload = function() { // 이 함수는 HTML 문서가 로드될 때 실행됩니다.
let text = document.getElementById("text"); // 아이디가 "text"인 요소를 선택합니다.
text.innerHTML = "HTML 문서가 로드되었습니다.";
}
자바스크립트 코드에서 프로퍼티로 등록하는 방법은 거의 모든 브라우저가 대부분의 이벤트 타입을 지원하고 있습니다.
이 방법의 단점은 이벤트 타입별로 오직 하나의 이벤트 리스너만을 등록할 수 있다는 점입니다.
2. 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법
객체나 요소의 메소드에 이벤트 리스너를 전달할 때는 다음 메소드를 사용할 수 있습니다.
1. addEventListener()
2. attachEvent()
addEventListener() 메소드는 거의 모든 브라우저에서 지원하는 이벤트 리스너 등록을 위한 메소드입니다.
addEventListener()의 사용방법은 다음과 같습니다.
대상객체.addEventListener(이벤트명, 실행할이벤트리스너)
이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달합니다.
실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달합니다.
onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다
더욱 효율적이 방법은 이 addEventListener 메소드를 활용하는 것입니다.
클릭 이벤트 핸들러를 등록하는 경우에 다음과 같은 차이가 있습니다.
addEventListener 함수를 사용하는 것은 이벤트 핸들러 속성을 사용하는 것보다 좋은 점이 몇 가지 있습니다.
1. 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.
2. 같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있다.
3. 추가적인 옵션 사항들이 제공된다
이벤트 발생 시에 이벤트 핸들러가 호출될 때 이벤트 객체가 전달되는데,
이때 이벤트 핸들러 함수의 매개변수를 통해 이벤트 객체를 받을 수 있다.
이벤트 객체란 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터입니다.
이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 합니다.
여기까지 이벤트에 대해서 알아보았습니다.
다음에는 입력값과 연산식에 대한 것을 알아볼게요.
'자바스크립트 JS > JS 입문 공부일지' 카테고리의 다른 글
| 자바 스크립트(js) 입문 공부 11. 타이머 기능, 자바스크립트로 디지털 시계 만들기 (0) | 2022.11.21 |
|---|---|
| 자바 스크립트(js) 입문 공부 10. 생성자, 기본생성자(Date), 시간의 표시 (0) | 2022.11.17 |
| 자바 스크립트(js) 입문 공부 7. 함수 선언식과 함수 표현식, 함수의 호출 (0) | 2022.11.16 |
| 자바 스크립트(js) 입문 공부 6. 조건문, 반복문 while (0) | 2022.11.16 |
| 자바 스크립트(js) 입문 공부 5. 비교 연산, 조건문 if문 , if~ else 문 (0) | 2022.11.16 |