231020_TIL

삼항연산자.. 안쓰다보니 문법도 어색하다
( a % 2 == 0 ) ? '수' : '박'

리뷰하던중 e.preventDefault(); 써놓은게 있었는데
정확한 설명이 되지않아 예시를 작성해보았다.

버블링관련 예제

<title>Document</title>
<style>
    .outer {
        border: 1px solid black;
        margin: 10px;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelector('section').addEventListener('click', () => {
            console.log('section!');
        });
        document.querySelector('article').addEventListener('click', () => {
            console.log('article!');
        });
        document.querySelector('div').addEventListener('click', () => {
            console.log('div!');
        });
        document.querySelector('p').addEventListener('click', (e) => {
            // stopPropagation()는 부모 엘리먼트에게 이벤트 전달을 중단해야 할 때 쓰이는 함수
            e.stopPropagation();
            console.log('p!');
        });

        // key 이벤트 동작 순서
        // key event 사이의 동작 순서는 다음과 같다. keydown → keypress → keyup
        // 하지만, 실제 글자가 입력되는 상황에서의 동작 순서는 다음과 같다.
        // ① 키보드 'G'를 누른다.
        // ② keydown 이벤트가 발생한다. (input text 창에는 'G'가 입력이 반영되지 않은 상태.)
        // ③ 'G'가 입력된다. (input text 창에 입력한 'G'가 반영된 상태/)
        // ④ keypress 이벤트가 발생한다.
        // ⑤ 'G' 키에서 손을 뗀다.
        // ⑥ keyup 이벤트가 발생한다.
        document.querySelector('#title').addEventListener('keydown', function (e) {
            // preventDefault()는 브라우저 고유의 동작을 중단시켜주는 역할을 합니다.
            // e.preventDefault();
            console.log('down', event.target.value, event);
        });
        document.querySelector('#title').addEventListener('keypress', function (e) {
            // e.preventDefault();
            console.log('press', event.target.value, event);
        });
        document.querySelector('#title').addEventListener('keyup', function (e) {
            // e.preventDefault();
            console.log('up', event.target.value, event);
        });




        document.querySelector('#submitBtn').addEventListener('click', function (e) {
            e.preventDefault();
            alert('클릭요');
        });






        // tr 클릭시 alert
        document.querySelectorAll('#scheduleTbody tr').forEach((item) => {
            item.addEventListener('click', function () {
                alert('상세내용 모달이나 페이지 이동');
            });
        });

        // 실행하기 클릭시 alert
        document.querySelectorAll('.exec').forEach((item) => {
            item.addEventListener('click', function () {
                alert('실행');
            });
        });
    });

</script>

section acticle

<br>

<div>
    <form action="a.html">
        <input type="text" id="title">
        <input type="submit" id="submitBtn" value="submit">
    </form>
</div>

<br>

<div>
    <table style="width:100%;" border="1">
        <thead>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>기능</th>
            </tr>
        </thead>
        <tbody id="scheduleTbody">
            <tr>
                <td>1</td>
                <td>하루한번 스케줄</td>
                <td>
                    <input class="exec" type="button" value="실행하기">
                    <input type="button" value="중단하기">
                    <input type="button" value="삭제하기">
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>한달한번 스케줄</td>
                <td>
                    <input class="exec" type="button" value="실행하기">
                    <input type="button" value="중단하기">
                    <input type="button" value="삭제하기">
                </td>
            </tr>
        </tbody>
    </table>
</div>