[툴팁] 성능을 고려해서 jquery 와 자바스크립트를 잘 선택해서 사용해야합니다.

[툴팁] 성능을 고려해서 jquery 와 자바스크립트를 잘 선택해서 사용해야합니다. > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

[툴팁] 성능을 고려해서 jquery 와 자바스크립트를 잘 선택해서 사용해야합니다. 정보

JavaScript [툴팁] 성능을 고려해서 jquery 와 자바스크립트를 잘 선택해서 사용해야합니다.

본문

예를 들면 툴팁같은경우

jquery 를 쓰면 더 느리게 처리하는 경우가 있습니다.

그럴때는 순수 자바스크립트로만 툴팁을 적용하면 훨씬 빠른 효과를 얻을수있습니다.

// tooltip.js


var preview="";
var gobj="";
function attachEvent_(obj, evt, fuc, useCapture) {
  if(!useCapture) useCapture=false;
  if(obj.addEventListener) { // W3C DOM 지원 브라우저
    return obj.addEventListener(evt,fuc,useCapture);
  } else if(obj.attachEvent) { // MSDOM 지원 브라우저
    return obj.attachEvent("on"+evt, fuc);
  } else { // NN4 나 IE5mac 등 비 호환 브라우저
    MyAttachEvent(obj, evt, fuc);
    obj['on'+evt]=function() { MyFireEvent(obj,evt) };
  }
}
 
function detachEvent_(obj, evt, fuc, useCapture) {
  if(!useCapture) useCapture=false;
  if(obj.removeEventListener) {
    return obj.removeEventListener(evt,fuc,useCapture);
  } else if(obj.detachEvent) {
    return obj.detachEvent("on"+evt, fuc);
  } else {
    MyDetachEvent(obj, evt, fuc);
    obj['on'+evt]=function() { MyFireEvent(obj,evt) };
  }
}
 
function MyAttachEvent(obj, evt, fuc) {
  if(!obj.myEvents) obj.myEvents= {};
  if(!obj.myEvents[evt]) obj.myEvents[evt]=[];
  var evts = obj.myEvents[evt];
  evts[evts.length]=fuc;
}
 
function MyFireEvent(obj, evt) {
  if(!obj.myEvents || !obj.myEvents[evt]) return;
  var evts = obj.myEvents[evt];
  for (var i=0;i<len;i++) {
    len=evts.length;
    evts[i]();
  }
}
 
function previewShow(e, obj, pv) {
  preview=pv;
  gobj=obj;
  attachEvent_(obj, "mousemove", previewMove, false);
  attachEvent_(obj, "mouseout", previewHide, false);
}
 
function previewMove(e) {
  var hb = document.getElementById(preview);
  if(hb.parentElement) hb.parentElement.style.display="";
  else hb.parentNode.style.display="";
  var evt = e ? e : window.event;
  var posx=0;
  var posy=0;
 
  if (evt.pageX || evt.pageY) { // pageX/Y 표준 검사
    posx = evt.pageX +8;
    posy = evt.pageY +16;
  } else if (evt.clientX || evt.clientY) { //clientX/Y 표준 검사 Opera
    posx = evt.clientX +10;
    posy = evt.clientY +20;
    if (window.event) { // IE 여부 검사
      posx += document.body.scrollLeft;
      posy += document.body.scrollTop;
     }
  }
 
  hb.style.left = posx + "px";
  hb.style.top = posy + "px";
}
 
function previewHide() {
  var hb = document.getElementById(preview);
  if(hb.parentElement) hb.parentElement.style.display="none";
  else hb.parentNode.style.display="none";
 
  detachEvent_(gobj,"mousemove", previewMove, false);
}

// test.html


<script src="tooltip.js" type="text/javascript"></script>
<style type="text/css">
 div.mouseView { width:150px; position:absolute; border:2px solid #ccc; font-size:12px; background-color:#fafafa; } 
</style>
<a href="#" onmouseover="previewShow(event,this,'t_tip1');">마우스 오버</a>
<span style="display:none;">
 <div id="t_tip1" class="mouseView">툴팁내용(HTML가능)</div>
</span>