티스토리 뷰

지식정보

JavaScript에서 이벤트 처리

onggun 2012. 3. 7. 13:34


자바스크립트에서는 개별 Element(태그)를 하나의 이벤트 처리 단위로 보고 있기 때문에 하나의 이벤트가 여러개의 Element에 전파된다.

이 것은 좋은 것일 수도 있지만 여러 이벤트가 동시에 호출되기 때문에 해당 하는 이벤트에 대하여 처리 메쏘드를 정의해 놨다면 어디에서 실행될 것인지 혼란을 주게 된다.

간단하게 다음 코드를 보면 이미지를 클릭 시에 바디에 정의된 메쏘드도 호출된다.

<body onclick='onclick_body();'  >
  <img src="" onclick='onclick_img();' >
</doby>


이것을 예방하기 위해서는 이벤트가 더 이상 전달 되지 않도록 이벤트가 처리될 타켓을 지정해 줘야 하는데 아쉽게도 IE와 다른 브라우저는 다르게 동작한다.

다음은 IE와 표준을 만족시키는 코드

function Listener(event){
    if(!event)event=window.event;
    if(!event.stopPropagation){//IE
           event.cancelBubble=true;
    }else{//DOM2.x
           event.stopPropagation();
    }
}


여기서 주의할 점은 메쏘드를 호출할 때 event를 인수로 전달해야 하는 것이다.

'지식정보' 카테고리의 다른 글

유닉스에서 특정 디렉토리내에 파일 갯수 세기  (0) 2012.11.02
A4 용지로 임시 CD 케이스 만들기  (0) 2012.06.28
Javascript 에서 ondblclick 시에 onclick 이벤트 제거하기  (1) 2012.03.07
나주김씨  (1) 2011.11.11
Mac 에서 화면 캡쳐하기  (0) 2011.10.31
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday