예제로 배우는 자바스크립트 요약 및 코드 분석 12장 12.4

12.4 포커스 이벤트

  텍스트도 비밀번호 입력창 안에 마우스를 클릭하면 마우스 커서가 깜빡인다. 이런 상태를 포커스를 얻었다고 표현한다. 반대로 입력창 외부를 클릭하면 포커스를 잃게 된다. FocusEvent 객체는 요소가 포커스를 얻거나 잃었을 때 발생되는 포커스 이벤트를 다루는데 사용된다. 많이 사용되는 포커스 이벤트를 표로 정리하면 다음과 같다.

포커스 이벤트
이벤트	발생 시점
onfocus	요소가 포커스를 얻었을 때
onblur	요소가 포커스를 잃었을 때

예제 12-11. onfocus와 onblur 이벤트 사용 예

onfocus.html

코드 원문

이름 : <input type="text" id="name">
<script>
    const x = document.getElementById("name");
    x.onfocus = function() { changeBgcolor1(); };
    x.onblur = function() { changeBgcolor2(); };
    function changeBgcolor1() {
        x.style.backgroundColor = "yellow";
    }
    function changeBgcolor2() {
        x.style.backgroundColor = "gray";
    }
</script>

예제 12-11. onfocus와 onblur 이벤트 사용 예

onfocus.html

코드 분석

이름 : <input type="text" id="name">
<script>
    const x = document.getElementById("name");
    x.onfocus = function() { changeBgcolor1(); };
    /* input 요소의 onfocus 이벤트의 핸들러 changeBgcolor1()을 설정한다.
    <input> 요소가 포커스를 얻으면 changeBgcolor1()이 실행되어 입력창의
    배경색이 노란색으로 변경된다.*/
    x.onblur = function() { changeBgcolor2(); };
    /* onblur 이벤트에는 핸들러 changeBgcolor2()를 설정한다. <input> 요소가
    포커스를 잃으면 changeBgcolor2()가 실행되어 입력창의 원래 배경색인 흰색으로
    돌아간다. */
    function changeBgcolor1() {
        x.style.backgroundColor = "yellow";
    }
    function changeBgcolor2() {
        x.style.backgroundColor = "gray";
    }
</script>

 

12.5 키보드 이벤트

  키보드 이벤트는 사용자가 키보드 키를 눌렸을 때와 눌렸다 떼었을 때 발생한다. KeyboardEvent 객체는 이러한 키보드 이벤트를 다루는 데 사용된다.

  키보드 이벤트는 다음 표에 나타난 onkeydown과 onkeyup 두 가지가 주로 사용된다.

키보드 이벤트
이벤트	발생 시점
onkeydown	사용자가 키보드 키를 눌렸을 때
onkeyup	사용자가 키보드 키를 눌렸다 떼었을 때

 

12.5.1 onkeydown 이벤트

다음 예제를 통하여 onkeydown 이벤트의 사용법에 대해 알아보자.

예제 12-12. onkeydown 이벤트 사용 예

onkeydown.html

코드 원문

<input placeholder="키를 입력하세요.">
<p id="show"></p>
<script>
    const input = document.querySelector("input");
    let text="";

    input.addEventListener("keydown", showKey);
    function showKey(e) {
        text += e.key;
        document.getElementById("show").innerHTML = text;
    }
</script>

예제 12-12. onkeydown 이벤트 사용 예

onkeydown.html

코드 분석

<input placeholder="키를 입력하세요.">
<p id="show"></p>
<script>
    const input = document.querySelector("input");
    let text="";

    input.addEventListener("keydown", showKey);
    /* <input> 요소에 addEventListener() 메서드를 이용해서 onkeydown
    이벤트에 핸들러 showKey()를 등록한다. addEventListener() 메서드에는
    onkeydown 이벤트에 대한 문자열 'keydown'이 메서드에 첫 번째 인수로
    사용된다. */
    function showKey(e) {
        text += e.key;
        /* e.key는 onkeydown 이벤느가 발생했을 때 사용자가 누른 키보드 키 값을
        의미한다. Alt, Shift, Ctrl 등의 특수 키를 누르면 e.key는 각각 Alt,
        Shift, Control 값을 가진다. */
        document.getElementById("show").innerHTML = text;
    }
</script>

 

12.5.2 onkeyup 이벤트

  다음 예제를 통하여 onkeyup 이벤트의 사용법에 대해 알아보자.

예제 12-13. onkeyup 이벤트 사용 예

onkeyup.html

코드 원문

<input type="text" placeholder="키를 입력하세요.">
<p id="show"></p>
<script>
    const input = document.querySelector("input");

    input.addEventListener("keyup", changeUpper);
    function changeUpper() {
        input.value = input.value.toUpperCase();
    }
</script>

예제 12-13. onkeyup 이벤트 사용 예

onkeyup.html

코드 원문

<input type="text" placeholder="키를 입력하세요.">
<p id="show"></p>
<script>
    const input = document.querySelector("input");

    input.addEventListener("keyup", changeUpper);
    /* addEventListener() 메서드를 이용하면 onkeyup 이벤트에 핸들러
    changeUpper()를 등록한다. 이렇게 함으로써 문자를 입력하고 뗄 때
    onkeyup 이벤트가 발생되고 이 이벤트는 핸들러 changeUpper()가 처리한다. */
    function changeUpper() {
        input.value = input.value.toUpperCase();
        /* input.value.toUpperCase()는 입력되는 영문 소문자를 대문자로 변환한다.
        이 값을 다시 input, value, 즉 입력 창의 입력 값으로 저장한다. */
    }
</script>

  입력창에 영문 소문자를 입력하면 대문자로 바뀌게 된다. 이것은 키보드 자판을 눌렸다 뗄 때 발생되는 onkeyup 이벤트를 이용한 것이다.

 

12.6 기타 이벤트

  앞 절에서 설명한 마우스, 포커스, 키보드 이벤트 외에도 다양한 이벤트들이 있다. 그 중 많이 사용되는 몇 가지 이벤트를 표로 정리하면 다음과 같다.

기타 이벤트
이벤트	발생 시점
onchange	폼 요소의 내용이 변경되었을 때
onload	객체가 로드되었을 때
oncopy	텍스트를 선택 후 Ctrl + C를 누르거나 복사하기 작업을 시작했을 때
oncut	텍스트를 선택 후 Ctrl + X를 누르고나 오려두기 작업을 시작하였을 때
onpaste	Ctrl + V를 누르거나 붙여넣기 기능을 수행했을 때

 

12.6.1 onchange 이벤트

  onchange 이벤트는 요소의 값이 변경되었을 때 발생한다. 한 예로 사용자가 선택 박스에서 항목을 선택하면 onchange 이벤트가 발생했다. 다음 예제를 통해서 onchange 이벤트의 사용법에 대해 알아보자.

예제 12-14. onchange 이벤트 사용 예

onchange.html

코드 원문

<label>
    취미:
    <select id="hb" name="hobby">
        <option value="">선택</option>
        <option value="여행">여행</option>
        <option value="게임">게임</option>
        <option value="운동">운동</option>
    </select>
</label>
<p id="show"></p>
<script>
    const x = document.getElementById("hb");
    x.addEventListener("change", (event) => {
        document.getElementById("show").innerHTML =
            "당신의 취미는 " + event.target.value + "입니다.";
    });
</script>

예제 12-14. onchange 이벤트 사용 예

onchange.html

코드 원문

<label>
    취미:
    <select id="hb" name="hobby">
        <option value="">선택</option>
        <option value="여행">여행</option>
        <option value="게임">게임</option>
        <option value="운동">운동</option>
    </select>
</label>
<p id="show"></p>
<script>
    const x = document.getElementById("hb");
    x.addEventListener("change", (event) => {
    // addEventListener() 메서드를 이용해서 onchange 이벤트에 리스너 함수를 등록한다.
        document.getElementById("show").innerHTML =
        // event.target.value는 <select> 요소에서 사용자가 선택한 항목 값을 의미한다.
            "당신의 취미는 " + event.target.value + "입니다.";
    });
</script>

 

12.6.2 onload 이벤트

  onload 이벤트는 객체가 로드된 직후 발생한다. 다음 예제에서와 같이 onload가 <body>요소의 속성으로 사용되면 페이지의 모든 내용물(이미지, 스크립트 파일 CSS 파일 등)이 로드된 직후 이벤트가 발생된다.

예제 12-15. onload 이벤트 사용 예

onload.html

코드 원문

<body onload="func()">
<p id="show"></p>
<script>
    function func() {
        document.getElementById("show").innerHTML = "페이지가 로드되었습니다!";
    }
</script>
</body>

예제 12-15. onload 이벤트 사용 예

onload.html

코드 원문

<body onload="func()">
// onload 이벤트를 사용해서 메서드 func()를 사용한다.
<p id="show"></p>
<script>
    function func() {
        document.getElementById("show").innerHTML = "페이지가 로드되었습니다!";
    }
</script>
</body>

 

12.6.3 oncopy/oncut/onpaste 이벤트

  oncopy 이벤트는 브라우저에서 텍스트나 이미지와 같은 요소를 복사할 때 발생한다. 그리고 oncut과 onpaste 이벤트는 각각 요소에 대해 오려두기와 붙이기 작업이 실행될 때 발생한다. 이 이벤트들은 주로 <input> 요소의 텍스트에 관련되어 사용된다.

예제 12-16. oncopy/oncut/onpaste 이벤트 사용 예

oncopy.html

코드 원문

<input type = "text" id="input1" size="80"><br>
<input type = "text" id="input2" size="80"><br>
<input type = "text" id="input3" size="80">
<p id="show"></p>

<script>
    const x = document.getElementById("input1");
    const y = document.getElementById("input2");
    const z = document.getElementById("input3");

    x.value = "텍스트 선택 후 Ctrl+C 눌려보세요.";
    y.value = "텍스트 선택 후 Ctrl+X 눌려보세요.";
    z.value = "텍스트 선택 후 Ctrl+V 눌려보세요.";

    x.addEventListener("copy", func1);
    y.addEventListener("cut", func2);
    z.addEventListener("paste", func3);

    function func1() {
        document.getElementById("show").innerHTML = "복사하기 실행했어요!";
    }
    function func2() {
        document.getElementById("show").innerHTML = "오려두기 실행했어요!";
    }
    function func3() {
        document.getElementById("show").innerHTML = "붙여넣기 실행했어요!";
    }
</script>

예제 12-16. oncopy/oncut/onpaste 이벤트 사용 예

oncopy.html

코드 원문

<input type = "text" id="input1" size="80"><br>
<input type = "text" id="input2" size="80"><br>
<input type = "text" id="input3" size="80">
<p id="show"></p>

<script>
    const x = document.getElementById("input1");
    const y = document.getElementById("input2");
    const z = document.getElementById("input3");

    x.value = "텍스트 선택 후 Ctrl+C 눌려보세요.";
    y.value = "텍스트 선택 후 Ctrl+X 눌려보세요.";
    z.value = "텍스트 선택 후 Ctrl+V 눌려보세요.";

    x.addEventListener("copy", func1);
    /* addEventListener() 메서드를 이용해서 oncopy 이벤트에 이벤트 핸들러
    func1()을 등록한다. 텍스트의 일부 또는 전부를 선택한 다음 Ctrl+C 키를 누르면
    oncopy 이벤트가 발생되어 func1()이 실행된다. */
    y.addEventListener("cut", func2);
    /* oncut 이벤트에 이벤트 핸들러 func2()를 등록한다. 텍스트의 일부 또는 전부를
    선택한 다음 Ctrl+X 키를 누르면 oncut 이벤트가 발생되어 func2()가 실행된다. */
    z.addEventListener("paste", func3);
    /* onpase 이벤트에 이벤트 핸들러 func3()를 등록한다. 입력 창 안에 마우스를
    클릭한 다음 Ctrl+V 키를 누르면 onpaste 이벤트가 발생되어 func3()가 실행된다. */

    function func1() {
        document.getElementById("show").innerHTML = "복사하기 실행했어요!";
    }
    function func2() {
        document.getElementById("show").innerHTML = "오려두기 실행했어요!";
    }
    function func3() {
        document.getElementById("show").innerHTML = "붙여넣기 실행했어요!";
    }
</script>