코딩 이야기

DOM에서 이벤트 처리하기 본문

JAVA스크립트

DOM에서 이벤트 처리하기

별메아리 2023. 1. 13. 16:31
728x90

addEventListener()함수로 여러 이벤트를 한번에 처리하기

 
    var pic = document.querySelector('#pic');
    pic.addEventListener("mouseover","changePic","false")
    pic.addEventListener("mouseout","changePic","false")
    // 괄호안에 첫번째 순서대로 설명
    // 1. 이벤트 유형
    /* 처리할 이벤트 유형을 정합니다. 단, 이함수에서 이벤트 유형을 지정할 때는 'on'을 붙이지 않고 'click'이나 'mouseover'처럼 이벤트 이름만 사용합니다.
    */
    // 2. 함수
    /* 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정합니다. */
    // 3. 캡처여부
    /*이벤트를 캡처링하는지 여부를 지정하는데 생략할 수 있습니다. true 이면 캡처링, false 이면 버블링한다는 의미이며 기본값은 false 입니다.
    */
    function changePic() {      
      pic.src = "images/boy.png";
    }
    function originPic() {
      pic.src = "images/girl.png";
    }

웹 요소의 스타일 가져와서 수정하기

DOM으로 CSS속성에 접근하고 수정하기

텍스트 색상 바꾸기

웹 요소의 스타일 속성에 접근할 때는 요소 다음에 .style 예약어를 쓰고 그다음에 CSS속성을 적습니다. 그래서 제목 텍스트의 글자를 흰색("white")로 바꾸고 싶을 때는 다음과 같은 소스를 사용한다

doncumet.querySelector("#heading").style.color ="white"
"white"

 

background-color이나 border-radius처럼 하이픈(-) 포함된 속성은 backgroundColor 이나 borderRadius처럼 낙타법으로 표기한다.

var myRect = document.querySelector("#rect");
myRect.addEventListener("mouseover", function() {  // mouseover 이벤트 처리
    myRect.style.backgroundColor = "green";  // myRect 요소의 배경색
    myRect.style.borderRadius = "50%";  // myRect 요소의 테두리 둥글게 처리
});
myRect.addEventListener("mouseout", function() {  // mouseout 이벤트 처리
    myRect.style.backgroundColor = "";  // myRect 요소의 배경색 지우기
    myRect.style.borderRadius = "";  // myRect 요소의 테두리 둥글게 처리 안 함
});
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM CSS</title>
    <style>
        #container {
            width:600px;
            margin:50px auto;
            text-align: center;
        }
        #rect {
            width:100px;
            height:100px;          
            border:1px solid #222;
            margin:30px auto;
            transition: 1s;
        }
    </style>
</head>
<body>
    <div id="container">
        <p>도형 위로 마우스 포인터를 올려놓으세요.</p>
        <div id="rect"></div>
    </div>  
   
    <script src="js/domcss.js"></script>
</body>
</html>
 

웹 요소를 화면에 표시하기/감추기

웹 문서에서 무엇인가를 화면에 표시하거나 감추려면 CSS 속성 중 display 속성이나 visibility 속성을 사용합니다. display:none을 사용해서 웹 요소를 화면에서 감추면 그 요소가 차지하던 공간도 사라지지만, visibility:hidden을 사용해서 웹 요소를 감추면 요소가 있던 공간은 빈 상태로 남아 있게 된다는 점이 큰차이입니다.

 

[상세 설명 보기/닫기] 버튼 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM</title>
    <link rel="stylesheet" href="css/product.css">
</head>
<body>
    <div id="container">
            <h1 id="heading">에디오피아 게뎁</h1>
            <div id="prod-pic">
                <img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
                    <div id="small-pic">
                        <img src="images/coffee-pink.jpg" class="small">
                        <img src="images/coffee-blue.jpg" class="small">
                        <img src="images/coffee-gray.jpg" class="small">
                    </div>
            </div>          
            <div id="desc">
                <ul>
                    <li>상품명 : 에디오피아 게뎁</li>
                    <li class="bluetext">판매가 : 9,000원</li>
                    <li>배송비 : 3,000원<br>(50,000원 이상 구매 시 무료)</li>
                    <li>적립금 : 180원(2%)</li>
                    <li>로스팅 : 2019.06.17</li>
                    <button>장바구니 담기</button>
                </ul>              
                <a href="#" id="view">상세 설명 보기</a>              
            </div>
            <hr>
            <div id="detail">                                  
                    <h2>상품 상세 정보</h2>
                    <ul>
                        <li>원산지 : 에디오피아</li>
                        <li>지 역 : 이르가체프 코체레</li>
                        <li>농 장 : 게뎁</li>
                        <li>고 도 : 1,950 ~ 2,000 m</li>
                        <li>품 종 : 지역 토착종</li>
                        <li>가공법 : 워시드</li>
                    </ul>
                    <h3>Information</h3>
                    <p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
                    <h3>Flavor Note</h3>
                    <p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
            </div>
    </div>

    <script src="js/product.js"></script>
</body>
</html>
 
상세설명 보기가 있는 id 값은 view [상세 설명 보기] 링크를 눌렀을 때 화면에 표시해야 할 부분의 id 값은 "detail"입니다.. 즉 "#view" 요소를 누르면 ""#detall" 요소가 화면에 나타나는 자바스크립트 소스를 작성해보자
 
 

        var view = document.querySelector("#view");  // #view 요소를 가져옴
        view.addEventListener("click", function() {
            if (isOpen == false) {  // 상세 정보가 감춰져 있다면
                document.querySelector("#detail").style.display = "block";  // 상세 정보를 화면에 표시
                view.innerHTML = "상세 설명 닫기";  // 링크 내용 수정
                isOpen = true;  // 표시 상태로 지정
            }
            else {  // 상세 정보가 표시되어 있다면
                document.querySelector("#detail").style.display = "none";  // 상세 정보를 화면에서 감춤
                view.innerHTML = "상세 설명 보기";  // 링크 내용 수정
                isOpen = false;  // 감춰진 상태로 지정
            }
        });
 
 

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'JAVA스크립트' 카테고리의 다른 글

참가신청명단만들기  (0) 2023.01.17
DOM에 요소 추가하기  (0) 2023.01.16
웹 요소에 태그 속성 가져와서 수정하기  (0) 2023.01.13
DOM 문서 객체 모델  (0) 2023.01.13
다시 정리하는 Array 객체  (0) 2023.01.12
'JAVA스크립트' Related Articles more
Comments