FEDev Story

제이쿼리에서는 이벤트 핸들러의 반환값을 검사해 이벤트 처리를 계속할 지 결정한다. 제이쿼리의 이벤트 핸들러에서는 주로 false를 반환한다. 이 반환 값은 다음 세가지 행동을 수행한다. 제이쿼리가 기본 동작(링크 따라가기, 텍스트 선택 등)을 수행하지 않게 한다. 이벤트 핸들러에서 event.preventDefault()를 호출하더라도 이와 같은 효과를 누를 수 있다. 제이쿼리가 부모 DOM 엘리먼트에서 같은 이벤트를 트리거(이런 동작을 버블링이라 한다)하는 일을 멈추게 한다. 이벤트 핸들러에서 event.stopPropagation()를 호출하더라도 이와 같은 효과를 누릴 수 있다. 해당 이벤트 핸들러 실행을 종료한다. 클릭한 엘리먼트가 이 핸들러 다음에 다른 핸들러에도 연결돼 있다면 순서상 다음번 핸..

출처 : http://ismydream.tistory.com/98event.stopPropagation() event.stopPropagation() 을 이해하기 위해서는 우선 HTML 상에서 사용자 이벤트가 어떻게 전달되는지 이해해야 합니다. 웹에서의 클릭이벤트 전파propagation 의 사전적의미는 전파, 확산입니다. 사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 위 슬라이드 우측의 문서구조를 보면 a 태그는 li, ul 의 두개의 부모태그가 있습니다.사용자가 a 태그를 클릭했을때 클릭이벤트는 a 태그..

다음은 단축메서드로 $ 함수를 정의하며 이벤트 위임을 사용해서 클릭이벤트가 발생한 'A'태그의 기본동작을 막고 href에서 특정값을 추출하기 위한 구문이다. Gravedigger Save Me var $ = function(id){ return document.getElementById(id); }; $('vids').onclick = function(e){ var src, id; e = e || window.event; src = e.target || e.srcElement; if(src.nodeName !== 'A'){ return; } if(typeof e.preventDefault === 'function'){ e.preventDefault(); } e.returnValue = false; id ..

분리와 점진적 개선을 고려한 이벤트 처리. 자주 사용하는 이벤트 유틸리티는 퍼사드 메서드로 만든다. Click me: 0 var myevent = { 'stop' : function(e){ //퍼사드메서드 // 이벤트 객체를 가져온다. e = e || window.event; // IE 이외의 모든 브라우저 // 기본동작이 수행되지 않게 한다. if(typeof e.preventDefault === 'function'){ e.preventDefault(); } // 이벤트가 상위 노드로 전파되지 않게 한다. if(typeof e.stopPropagation === 'function'){ e.stopPropagation(); } // IE // 기본동작이 수행되지 않게 한다. if(typeof e.retu..