[JavaScript] JavaScript 이벤트

1. 이벤트와 이벤트 핸들러(리스너)

이벤트
- 웹 페이지에서 키보드, 마우스 클릭, 마우스 이동 등 동작의 사건을 발생시키는 것
이벤트 핸들러(리스너)
- 웹 페이지에서 이벤트가 발생 할 경우 호출되도록 등록하기 위한 함수
- 즉, 특정 함수를 이벤트에 등록하여 해당 함수(기능)을 하도록 함

2. 이벤트의 종류

마우스(Mouse)	마우스 클릭, 이동, 포커싱, 동작과 관련된 이벤트	click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave
키(Keyboard)	키보드의 키 업/다운 및 타이핑과 관련된 이벤트	keydown, keyup, keypress, keycode
폼(Form)	입력폼 요소에서 발생하는 이벤트	input(text) change(select, check, radio)
포커스(focus)	돔(Dom) 요소(Element)에 포커싱과 관련된 이벤트	focus/focusin, blur/focusout
UI(User Interface)	화면 로딩, 스크롤, 사이즈 변경 등에 관련된 이벤트	load, unload, error, resize, scroll, select

3. 이벤트 연결 방법

인라인(inline)
- 돔(Html Tag : DOM)의 이벤트에 함수를 바로 연결하는 방법
<input type="button" value="button" onclick="alert('Hello World');"/>
<button onclick="myHandler1(); myHandler2();/>Click me</button>

<script>
function myHandler1() {
alert('myHandler1');
}
function myHandler2() {
alert('myHandler2');
}
</script>
프로퍼티(Property)
- document 객체의 onclick에 함수를 바로 연결하는 방식
- 이벤트 핸들러 프로퍼티 방식은 이벤트에 하나의 이벤트 핸들러만을 바인딩 할 수 있음
- 여러 개라면 마지막에 바인딩 된 함수만 가능
<button class="btn">Click me</button>

<script>
var btn = document.querySelector('.btn');
// 첫번째 바인딩된 이벤트 핸들러
btn.onclick = function() {
alert('Button click 1');
}

// 두번째 바인딩된 이벤트 핸들러
btn.onclick = function() {
alert('Button click 2');
}
</script>
돔(Dom) addEventListener 메소드
- 요소(element)에 addEventListener() 함수(메소드)를 통해 등록하는 방식
- 이것은 여러 개를 바인딩 하더라도 다 실행가능하다.
- 함수를 function() 로 익명함수로 할 수 있고 () => (arrow)를 이용해서 할 수도 있다.
- 그리고 함수가 길어지거나 재사용 가능성이 있을 때는 따로 함수를 정의 해주고 사용한다.
<input type="button" id="target" value="button"/>

<script>
var t = document.getElementById('target');

t.addEventListener('click', function(event) {
alert('Hello world, ' + event.target.value);
});
</script>

4. 이벤트 관련 정보

event
- onclick = "clickme(event)"; 처럼 함수 매개변수에 event로 준다면 작성한 이벤트의 객체가 매개변수로 넘어가서 자바스크립트에서 사용할 수 있게 된다.
target
- target은 event객체가 매개변수로 넘어왔을 때 event.target으로 그 이벤트를 발생시키는 태그를 받아올 수 있다.
- 그래서 그것을 이용해 value등 원하는 정보를 사용할 수 있다.
keycode
- keypress 이벤트를 할 때 누른 키에 대해 각각 keyCode를 가지고 있다.
- event를 매개변수로 받아 event.keyCode를 사용해서 검사를 할 수 있다.
- 예를 들어, 엔터는 키 코드가 13이므로 if 문을 써서 keyCode === 13일 때 경고창을 띄우든지 할 수 있다.

5. 다양한 이벤트 예시

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h2>마우스 이벤트 1</h2>
        <button onclick="clickme();">클릭하세요</button>
        <button ondblclick="clickme();">더블 클릭하세요</button>
        
        <h2>마우스 이벤트 2</h2>
        <button onmouseout="mouseEvent('마우스 아웃')">마우스 아웃</button>
        <button onmousedown="mouseEvent('마우스 다운')">마우스 다운</button>
        <button onmouseover="mouseEvent('마우스 오버')">마우스 오버</button>
        <button onmouseup="mouseEvent('마우스 업')">마우스 업</button>
        <button onmousemove="mouseEvent('마우스 이동')">마우스 이동</button>
        <button oncontextmenu="mouseEvent('마우스 우클릭<메뉴>')">마우스 우클릭</button>

        <h2>키 이벤트</h2>
        <textarea onkeydown="keydown(event);"></textarea>
        <textarea onkeyup="keyup(event);"></textarea>
        <textarea onkeypress="keypress(event);"></textarea>

        <h2>폼 이벤트</h2>
        <label>
            <input type="radio" name="fruit" value="apple" onchange="change('사과', event)"/>
            사과
        </label>
        <label>
            <input type="radio" name="fruit" value="apple" onchange="change('바나나', event)"/>
            바나나
        </label>
        <textarea oninput="input(event)"></textarea>
    </body>
</html>

<script>
    function clickme() {
        console.log("클릭하셨습니다.");
    }

    function mouseEvent(text) {
        console.log("마우스 이벤트 ===> " + text);
    }

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

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

    function keypress(event) {
        // console.log(event);
        console.log(event.keyCode);

        // 엔터를 입력할 경우 경고창 표시
        if(event.keyCode === 13) {
            alert("엔터를 입력하셨습니다.");
        }
    }

    function change(title, event) {
        alert(title + "를 선택하셨습니다.");
        console.log(event);
    }

    // target은 이 이벤트를 하는 태그를 의미
    function input(event) {
        // console.lo(event);
        var text = event.target.value;
        console.log(text);
    }
</script>

저작자표시

'FrontEnd > JavaScript' 카테고리의 다른 글

[JavaScript] JavaScript 객체 (0)	2022.09.27
[JavaScript] 변수의 종류(var, let, const) (0)	2022.09.27
[JavaScript] JavaScript 함수 (0)	2022.09.22
[JavaScript] JavaScript 배열 (0)	2022.09.22
[JavaScript] 자바스크립트 조건문(삼항연산자), 반복문 (1)	2022.09.20

1. 이벤트와 이벤트 핸들러(리스너)

2. 이벤트의 종류

3. 이벤트 연결 방법

4. 이벤트 관련 정보

5. 다양한 이벤트 예시

'FrontEnd > JavaScript' 카테고리의 다른 글

티스토리툴바