버블 링 이벤트 디자인

Question

onmouseover 및 onmouseout 이벤트가있는 테이블에 <td>의 묶음이 있습니다. 거기에 하나의 이벤트 핸들러 만 있고 싶습니다. 예를 들어 <table> 자체에서 모든 이벤트를 처리하여 페이지에서 너무 많은 이벤트 처리기를 방지하는 방법을 알고 싶습니다. 네이티브 javascript를 사용하면이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

이벤트해야 기포가 계층 구조의 하위 요소 아래에서 프로세스 취소하지 않는 한 테이블까지. 표에서 mouseover 및 mouseout 이벤트에 대한 이벤트 리스너를 설정하고 대상이 <td> 셀인지 확인할 수 있습니다. 그렇다면 해당 이벤트를 처리하십시오. 여기에 간단한 예가 있습니다.

var table = document.getElementById("myTable"); 

table.addEventListener('mouseover', function(event) { 
    var target = event.target; 
    if (target.nodeName == 'TD') { 
     target.style.backgroundColor = '#FFF'; 
    } 
}); 

마우스 이벤트는 compatibility table을 참조하십시오. 이전 버전의 IE는 w3c 사양에 따라 DOM 이벤트 등록 모델을 따르지 않으므로 attachEvent을 사용하여 IE에만 ​​이벤트를 첨부해야합니다.

IE와 다른 브라우저의 차이점을 더 잘 이해하려면 article을 읽어보십시오.

브라우저가 아닌 브라우저 example을 여기에서 체크 아웃하십시오.

Answer 2

자바 스크립트를 사용하면 두 핸들러를 각각 설정할 수 있지만 페이지가 어수선하게 정리되지는 않습니다. getElementsByTagName ("td")을 사용하여 적절하게 수정하십시오. 그런 다음 각 요소에 대해 tableElem, tableElem.onMouseOver = function() {whatever ...} 및 tableElem.onMouseOut = function() {whatever ...}을 반복합니다.

예를 들어 jQuery를 사용하려는 경우 더 간결하게 만들 수 있습니다. $ ("td"). mouseOver (function() {whatever;});

Answer 3

예제 코드 :

table.onmouseover = function(event) { 
    var target = (event && event.target) || window.event.srcElement; 
    if(target.nodeName.toLowerCase() !== 'td') return; 

    // do stuff 
};