jqxinput change evnet 두번 타는 문제, ( 버블링, 캡처링 )

아래 그림과 같이 123 을 입력하면 무언가 계산을 해서 우측에 출력하는 것을 해보려고 코드를 짯는데

change 이벤트를 한번 타고는 잘 실행이 되는데 자동으로 change 이벤트를 두번타고 위와 같이 에러를 뱉어 낸다.

이것저것 검색을 해본결과 버블링 문제인것 같아서 아래 코드에 주석 표시해 둔것과 같이 방법 2가지로 해결을 할수 있는데

( 버블링 이랑 캡쳐링은 html 구조상 하위 클릭, 또는 상위클릭시 겹쳐져있는 엘레먼트의 이벤트도 동작하는 문제  )

if ( !event.args) return; 이 코드를 입력해두면 이벤트를 태우지 않고 리턴해버려서 해결이 되고

조금더 찾아보니

event.stopPropagation(); 이것을 입력해주면 연속되는 이벤트를 끊어 버린다고 한다.

그런데 이건 버블링 문제가 아닌것 같아서 일단은 if문을 사용하기로 하였다.

조금 더 찾아보아야 할듯....

$('#txt_input').jqxInput({
    theme : g_RootVar.theme,
    width : '10%',
    height : '25px',
}).on('change',function(event){
//if (!event.args) return;  //지금은 일단 이 코드로 이벤트 두번 타는것을 막는 것이 나아보임.
//event.stopPropagation();  //버블링, 캡처링 문제일 때 사용하는 방법 //그다음 연속되는 이벤트를 끊어버림.
 
    var EventValue = event.args.item.value;
    EventValue = EventValue +1;
    $div.find('[data-id="txt_output"]').val(EventValue);
});
 
$('#txt_output').jqxInput({
    theme : g_RootVar.theme,
    width : '10%',
    height : '25px',
});