자바스크립트 연산

자바스크립트가 css를 그냥 다룰 수 없기 때문에 css를 변경시켜준다.

window 객체 안에 여러가지 객체가 위치해있다. document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹페이지 자체이다.

각 요소들에 접근할 때 이용하는 2가지

하나가 아니라 여러가지 요소에 접근할 때는

get Elements By TagName

<aside> 💡 Event Listener: 마우스를 이용해서 버튼 클릭시 발생하는 이벤트 이벤트가 발생할 때 어떠한 함수를 호출하는데 그 함수가 바로 이벤트 리스너

이벤트 리스너를 등록해야 한다. (=이벤트 리스너가 호출되어야 한다.) 방법은 총 3가지가 있다.

</aside>

  1. 자바스크립트 코드에서 프로퍼티로 등록
window.onload = function () {

  let text=document.getElement

이벤트 버블링

<aside> 💡 이벤트 버블링: 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것을 의미한다.(bubble up)

3번, 2번, 1번 요소에 그 이벤트에 대한 핸들러가 있다면 3→2→1 순서이다.

Untitled

</aside>

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Event Bubbling</title>
    <style>
        body * {
            margin: 10px;
            border: 1px solid red;
        }
    </style>
</head>
 
<body>
    <form onclick="alert('form')">FORM
        <div onclick="alert('div')">DIV
            <p onclick="alert('p')">P</p>
        </div>
    </form>
</body>
 
</html>

delegation

<!DOCTYPE html>
<html>
<head>
    <title>Event Delegation</title>
    <meta charset="UTF-8" />
</head>
<body>
    <div id="buttons">
        <button class="buttonClass">Click me</button>
        <button class="buttonClass">Click me</button>
    </div>
    <script>
        const buttons = document.getElementsByClassName("buttonClass");
        for (const button of buttons) {
            button.addEventListener("click", () => alert('clicked'));
        }

        const buttonList = document.querySelector('#buttons');
        const button = document.createElement('button');
        
        button.setAttribute('class', 'buttonClass');
        button.innerText = "Click me";
        buttonList.appendChild(button);
    </script>
</body>
</html>

Untitled

상위요소의 이벤트 위임이 필요하다. 해결책은?