(js) DOM - click 이벤트(dom_display)

06_dom_display.js

1. click 이벤트

• click(클릭: 90%), 마우스, 키보드 키다운/업 등의 행위
• 사용법 :

// 클릭 이벤트
// TODO: 사용법 : 
// let 변수 = document.querySelector("css선택자");
// 변수.addEventListener("이벤트", function(){
//     실행문;
// });
closeBtn.

• html 예제)

<!-- TODO: 버튼 누르면 팝업창 사라지기  -->
    <p>팝업 창</p>
    <div class="popup" id="notice">
        <h1>공지사항</h1>
        <ul>
            <li>내용</li>
            <li>내용</li>
            <li>내용</li>
            <li>내용</li>
            <li>내용</li>
        </ul>
        <button>닫기</button>
    </div>
    <!-- js 파일 -->
    <script src="./js/06_dom_display.js"></script>

2.click 이벤트 #2 //

-예제) 3가지 글자 링크를 클릭하면 그 색깔로 배경색을 바꾸기

// TODO: click #2 예제
// 예제) 3가지 글자 링크를 클릭하면 그 색깔로 배경색을 바꾸기
// 함수 정의
function changeBg(color) {
    // div 태그 접근(선택)
    let result = document.querySelector("#result");
    // 배경색 바꾸기
    result.style.backgroundColor = color; // "green", "orange", "purple"
}