[Javascript] click 이벤트가 자식과 부모 이중으로 발생할 때 처리

테이블 <TR> 에 onClick 이벤트와  <TD> 안에 특정 버튼 element 에 onClick 이벤트가 설정되어 있을 때

버튼을 클릭하여 버튼의 onClick 핸들러가 실행되고 나서  또 <TR> 의 onClick 이벤트 핸들러가 이중으로 실행된다.

이 때 아래와 같은 방법으로  버튼의 이벤트 핸들러에  코드를 추가하여 이벤트 중첩을 방지 할 수 있다.

function onClickButton(evt) {
	evt = evnt || window.event;
    
    // 방법1
    evt.stopPropagation();
    
    // 방법2
    evt.preventDefault();
    
	evt.cancelBubble = true;
    
    
    // 대상 버튼에 에니메이션이나 툴팁 같은 효과가 적용됐을 경우 
    // 해당 UI 처리 관련 이벤트로 모두 중단되어 UI 상태가 이상해지므로 
    // 다른 element 에 강제로 포커스를 줘서 해결될 수도 있음.
    document.form.keyword.focus();    
 }