[JavaScript]이벤트 버블링(Event Bubbling)

[JavaScript]이벤트 버블링(Event Bubbling)

이벤트 버블링이란

이벤트 버블링이랑 직접 이벤트를 넣은 객체의 부모까지 이벤트의 영향이 미치는 것을 말한다.

예제로 이해하기

[JavaScript]부트스트랩(Bootstrap) 활용하기 - 모달창, 네브바, 로그인부트스트랩을 활용하여 웹 사이트에서 자주 사용하는 모달창과 네브바, 로그인 창을 만들어보자....

html

   <div class="black-bg">
        <div class="white-bg">
            <p>로그인 하세요.</p>
            <form action="login.php">
                <div class="form-group">
                  <input type="email" class="form-control" id="email">
                  <p id="email-alert">이메일이 빈칸입니다.</p>
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" id="pwd">
                  <p id="pwd-alert">비밀번호가 빈칸입니다.</p>
                </div>
                <button type="submit" class="btn btn-primary">전송</button>
                <button class="btn btn-danger" id="close">닫기</button>
              </form>
        </div>
    </div>

    <a id="login" class="btn btn-primary btn-lg" role="button">Login</a>

css

.black-bg{
    background:rgba(0,0,0,0.5);
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: block;
    transition: all 1s;
    transform: translateY(-1000px);
}

.white-bg{
    background:#fff;
    width: 80%;
    margin: 100px auto;
    padding: 20px;
    border-radius: 10px;
}

js

      $(".black-bg").click(function(){
        $(this).hide();
      });

위 코드에서 input 태그에 마우스 클릭하면 black-bg 클래스가 클릭된 것으로 간주하는 것이 바로 이벤트 버블링이다.

이벤트 버블링 해결하기

에빈트 버블링을 해결하는 방법은 이벤트 함수 내부에 파라미터를 추가하여 이벤트를 조작하여 필요한 부분에서만 이벤트가 작동하도록 한다.

이벤트 조작 함수 종류

      $(".black-bg").click(function(e){
        console.log(e.target); // 실제로 클릭한 요소
        console.log(e.currentTarget); // 지금 이벤트리스거가 달린 곳 = $(this)
        console.log(e.preventDefault); // 기본동작 막기
      });

콘솔

이벤트 조작함수 사용해보기

.black-bg 클래스만 클릭했을 때 이벤트 동작하게 만들 수 있다.

js

      $(".black-bg").click(function(e){
        if(e.target == e.currentTarget){
          $(this).hide();
        }
      });

 

이벤트 리스너 절약하는 방법

[JavaScript]탭메뉴 만들기(반복문)자바스크립트를 이용하여 탭메뉴를 구현합니다....

1. 이벤트를 하위 요소에 직접 넣지 않고 상위 요소에 이벤트 리스너를 넣는다.($(“.list”))
2. HTML 안에 개발자용 요소를 추가해서 가져와 사용한다.(data-id=”숫자”)

js

$(".list").click(function(e){
    //만약 내가  실제 누른 버튼이 0,1,2이면 탭 0.1.2번째 열어주셈

    //tab-button에 data-작명="숫자" 요소를 몰래 넣어두고 가져다 쓸 수 있다.
    tabOpen(e.target.dataset.id);
});

html

      <ul class="list">
        <li class="tab-button" data-id="0">Products</li>
        <li class="tab-button active" data-id="1">Information</li>
        <li class="tab-button" data-id="2">Shipping</li>
      </ul>

제이쿼리에서 사용하는 방법

//제이쿼리에서 직접 몰래 정보를 저장하는 방법
$('.list').data('작명','값'); 
//제이쿼리에서 몰래 저장한 정보를 꺼내는 방법
$('.list').data('작명');