이벤트를 바인딩하는 2가지 방법

이벤트를 바인딩할 때 기본적으로 이벤트를 걸고싶은 요소에 eventListener를 추가하거나, 태그 내부에 함수를 추가하는 것으로 걸 수 있다.

 

만일 특정 요소에 동적으로 이벤트를 부여하는 상황에서, 렌더링 시 문제가 발생해서 이벤트가 바인딩되지 않고 있다면 어떻게 이벤트를 걸 것인가?

 

워드프레스의 숏코드를 활용하여 요소에 이벤트를 부여하는 과정에서, 간헐적으로 이벤트가 바인딩되지 않는 상황이 발생했다.

 

1. 요소에 이벤트를 걸기

jQuery('#buttonId').unbind().bind('click', function () {
		    popupObject.showPopup();
		});

위와 같이, 특정 버튼 요소에 팝업 이벤트를 바인딩하는 함수가 있다.

이 경우 버튼에 직접 이벤트를 바인딩 하기 때문에, 요소의 렌더링이 완료되어 있어야만 한다.

 

 

2. 요소의 부모에 이벤트를 걸기

jQuery(document).on('click', function (e) {
            var isButtonId = jQuery(e.target).prop('id') == 'buttonId';
            var hasParentPopupElement = jQuery(e.target).parents('#buttonId').length > 0;
            var hasPopupClass = jQuery(e.target).hasClass('buttonClass')
            if (isPopupId || hasParentPopupElement || hasPopupClass) {
                popupObject.showPopup();
            }
        })

반면에 이 방법은 버튼의 상위 요소에 이벤트가 걸려있다.

HTML의 이벤트는 버블링 성질을 가지고 있기 때문에, 이벤트가 발생한 요소의 상위 요소까지 이벤트 발생 여부가 전달된다.

이를 활용하여, 버튼을 클릭하면 버블링된 이벤트를 상위 요소에서 처리하도록 이벤트를 바인딩하고

이벤트 내부에서 event.target 이 찾고자 하는 요소가 맞는지 확인한 다음 popup 함수를 실행시킨다.

 

이 방법은 요소에 직접 이벤트를 바인딩 하지 않아도 이벤트를 바인딩한 것과 같은 작용을 한다.

 

그러나 이벤트는 이벤트를 발생시키는 요소에 바인딩 하는 것이 가장 바람직하므로

위의 방법을 사용하는 것은 피하는 것이 좋다