FEDev Story

다음은 단축메서드로 $ 함수를 정의하며 이벤트 위임을 사용해서 클릭이벤트가 발생한 '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 ..

DOM 업데이트시 브라우저는 화면을 다시 그리고(repaint), 엘리먼트를 재구조화(reflow)하는데, 이 또한 비용이 많이 드는 작업이다. 원칙적으로 DOM 업데이트를 최소화하는 게 좋다. 문서 조각을 생성해 외부에서 수정한 후, 처리가 완전히 끝난 다음에 실제 DOM에 추가하는 방법이 있다. var p, t, frag; frag = document.createDocumentFragment(); p = document.createElement('p'); t = document.createTextNode('first paragraph'); p.appendChild(t); frag.appendChild(p); p = document.createElement('p'); t = document.create..

분리와 점진적 개선을 고려한 이벤트 처리. 자주 사용하는 이벤트 유틸리티는 퍼사드 메서드로 만든다. 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..