15. [jQuery] 이벤트 버블링 및 이벤트 메소드

안녕하세요 이번 포스팅에서는 이벤트 버블링 및 여러가지 이벤트 메소드에 대해서 학습해보도록 하겠습니다. 

 

이벤트 메소드 

이벤트 리스너를 달았을 때 파라미터로 e 혹은 event를 주어서 할 수 있는 동작들 입니다. 

예시를 위해서 폼 HTML 을 가져왔습니다. 

 

HTML 

<div class='black-background'>
        <div class='white-background'>
            <h3 class='text-center mb-5'>Sign in</h3>
            <form action="login.php">
                <div class="form-group mb-2">
                    <h5>Email Address</h5>
                    <input type="text" id='email' class="form-control" placeholder="Email">
                    <p id='email-alert'></p>
                </div>
                <div class="form-group mb-5">
                    <h5>Password</h5>
                    <input type="text" id='password' class="form-control" placeholder="Password">
                    <p id='pw-alert'></p>
                </div>
                <button type="submit" class="btn btn-primary mr-2">Submit</button>
                <button type="button" id='btn-close' class="btn btn-danger mr-2">Cancel</button>
            </form>
        </div>
    </div>

 

 

▷ e.target  

: user 가 실제로 클릭한 요소를 알려주는 메소드

$('.black-background').click(function(e){
            console.log(e.target); // 실제 user가 클릭한 요소를 html 태그로 알려준다. 
 })

User가 white-background를 클릭하면 e.target은 white-background 에 해당하는 HTML 태그들을 출력해줍니다. 

 

 

▷ e.currentTarget 

: 지금 클릭한 요소의 이벤트 리스너가 달린 태그 (상위 태그) 를 알려주는 메소드 

 $('.black-background').click(function(e){
 	console.log(e.currentTarget); // user가 클릭한 요소의 이벤트 리스너가 달려있는 곳의 요소를 html 태그로 알려준다. 
 })

User가 white-background를 클릭하면 e.target은 white-background가 속해있는 상위 이벤트 리스너가 달린 HTML 태그들을 출력해줍니다. 

 

 

▷ e.preventDedault(); 

: 기본 동작을 막을 때 쓰는 요소를 명령할 때 사용하는 메소드 

 

▷ e.stopPropagation(); 

: 상위 요소로의 이벤트 버블링 현상을 막기 위해 사용하는 메소드

 

 

이벤트 버블링

간단하게 '이벤트가 상위 요소로 퍼지는 현상' 이라고 생각하시면 됩니다. 

 

예제를 통해서 알아보도록 하겠습니다. 

 

 

[Target]

로그인 모달창에서 바깥 쪽 검은 background-black을 클릭하면 모달창이 닫히는 UI를 구현하고자 합니다. 

 

구현 코드

 $('.black-background').click(function(e){
        $('.black-background').fadeOut();
  })

 

아주 완벽하다고 생각한 코드가 작성되었습니다. 

 

하지만 이 코드는 치명적인 문제가 존재합니다. 

폼 태그 내부의 어떤 요소를 클릭하던 간에 로그인 모달창은 fadeOut(); 되어 사라집니다......

 

이것이 바로 이벤트 버블링 현상입니다. 

Email Input을 클릭하면 Email input을 클릭한 것 뿐만 아니라 
black-background, white-background, Email-input 3가지를 동시에 클릭
한 것으로 브라우저가 인식한 것으로 되어 버립니다. 

 

이러한 현상을 방지하기 위해서 이벤트리스너 메소드를 활용하면 해결 할 수 있습니다.

 $('.black-background').click(function(e){
            console.log(e.target); // 실제 user가 클릭한 요소를 html 태그로 알려준다. 
            console.log(e.currentTarget); // user가 클릭한 요소의 이벤트 리스너가 달려있는 곳의 요소를 html 태그로 알려준다. 
            if(e.target == e.currentTarget){
                $('.black-background').fadeOut() ;
            }
        })

e.target은 현재 사용자가 누른 HTML 요소를 보여주는 메소드, 

e.currentTarget은 현재 사용자가 누른 HTML 요소의 이벤트리스너가 달려있는 메소드를 보여줍니다. 

 

현재 이벤트 리스너가 black-background 에 달려있으므로 target 과 currentTarget을 같게 설정할 때만 모달창을 닫아준다면 이벤트 버블링 현상을 방지 할 수 있습니다.