JavaScript DOM 이벤트(참고)_javascript 기술

챕터 1 이벤트 흐름

1-1. 이벤트 버블링: 이벤트는 처음에 가장 구체적인 요소(문서에서 가장 깊은 중첩 수준을 가진 노드)에 의해 수신됩니다. 그런 다음 단계적으로 가장 구체적인 노드(문서)까지 전파합니다.
1-2. 이벤트 캡처: 덜 구체적인 노드는 이벤트를 더 일찍 수신해야 하고, 가장 구체적인 노드는 이벤트를 마지막에 수신해야 합니다.

2장 이벤트 핸들러

2-1 HTML 이벤트 핸들러

//단점: HTML과 JS 코드는 서로 밀접하게 결합되어 있습니다.

<input type="button" value="按钮" onclick="showMessage()">

2-2 DOM 레벨 0 이벤트 핸들러

//더 전통적인 방법: 더 일반적으로 사용되는 이벤트의 핸들러 속성에 함수를 할당합니다. //장점: 단순/크로스 브라우저;

<input type="button" value="按钮" id="btn2">
<script>
  var btn2 = document.getElementById('btn2'); //取得btn2按钮对象;
  btn2.onclick = function () {        //给btn2添加onclick属性;
    alert('这是通过DOM0级添加的事件!');
  }
  btn2.onclick=null;             //删除onclick属性;
</script>

2-3 DOM2 레벨 이벤트 핸들러

//DOM2 레벨 이벤트는 이벤트 핸들러 지정 및 삭제 작업을 처리하는 두 가지 방법을 정의합니다. //addEventListener() 및 제거EventListner();

//3개의 매개변수를 받습니다: 처리할 이벤트 이름/이벤트 처리 함수 및 부울 값

//IE8에서는 작동하지 않습니다.

2-4 IE 이벤트 핸들러 및 크로스 브라우저

<input type="button" value="按钮" id="btn3">
<script>
  var btn3 = document.getElementById('btn3');
  btn3.addEventListener('click',showMessage,false);    //添加事件程序;
  btn3.addEventListener('click',function(){        //添加多个事件程序;
    alert(this.value);
  },false);
  btn3.removeEventListener('click',showMessage,false);  //删除事件程序;
</script>

//두 개의 매개변수를 받습니다: 이벤트 처리 함수 이름과 이벤트 처리 함수

>2. 브라우저 호환

<script>
   var btn3 = document.getElementById('btn3');
   btn3.attachEvent('onclick',showMessage);      //添加事件;
   btn3.detachEvent('onclick',showMessage);      //删除事件;
</script>

//将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil';
var eventUtil = {
  //添加句柄
  addHandler:function(element,type,handler){
    //判断DOM2级事件处理程序;
    if(element.addEventListener){  
      element.addEventListener(type,handler,false);
    //判断IE浏览器;
    }else if(element.attachEvent){
      element.attachEvent("on"+type,handler);
    //使用DOM0级事件处理程序;
    }else{
      element['on'+type] = handler;
    }
  };
  //删除句柄
  removeHandler:function(element,type,handler){
    //判断DOM2级事件处理程序;
    if(element.removeEventListener){  
      element.removeEventListener(type,handler,false);
    //判断IE浏览器;
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    //使用DOM0级事件处理程序;
    }else{
      element['on'+type] = null;
    };
  };
};
//跨浏览器添加事件处理程序;
eventUtil.addHandler(btn3,'click',showMessage);

챕터 3 이벤트 객체

3-1 DOM의 이벤트 객체

//DOM에서 이벤트가 트리거되면 객체 ==이벤트가 생성됩니다.

>1.type == 이벤트 유형 가져오기;

>2.target == 이벤트 대상 가져오기;

>3.stopPropagation() == 이벤트 버블링 중지;

>4.preventDefault() == 이벤트 방지의 기본 동작;

3-2 IE의 이벤트 객체

function showMes(event){
  alert(event.type);          //onclick;点击事件;
  alert(event.target.nodeName);  　　//INPUT;input按钮被触发;
  event.stopPropagation();      //停止事件冒泡;
}
<a href="event.html" onclick="stopGoto();">跳转</a>
function stopGoto(event){
  event.preventDefault();　　　　　　　//阻止默认行为;
}

>1.type == 위와 동일;

>2.srcElement 속성 == 이벤트 대상 가져오기;

>3.cancleBubble 속성 == 버블링 방지; 버블링을 방지하려면 true로 설정하고, 버블링을 방지하려면 false로 설정하세요.

>4.returnValue 속성 == 이벤트 차단에 대한 기본 동작;

function showMes(event){
  //非IE用event,IE8以下用window.event;
  event = event || window.event;  
  //事件目标兼容;
  var ele = event.target || event.srcElement;
  //兼容阻止事件冒泡;
  if(event.stopPropagation){
    event.stopPropagation();
  }else{
    event.cancleBubble();
  };
  //兼容取消事件默认行为;
  if(event.preventDefault){
    event.preventDefault();
  }else{
    event.returnValue = false;
  }
}

4장 QQ 패널 드래그 효과

>1. 클래스 메소드를 캡슐화합니다

>2. 드래그 앤 드롭 기능 캡슐화

function getClass(clsName,parent){
  var oParent = parent?document.getElementById(parent):document,
      eles = [],
      elements = oParent.getElementsByTagName('*');

  for (var i=0,l=elements.length; i<l; i++){
    if(elements[i].className == clsName){
      eles.push(elements[i]);
    }
  }
  return eles;
}

window.onload = drag;
function drag(){
  var oTitle = getClass('login_logo_webqq','loginPanel')[0];  
  //拖拽
  oTitle.onmousedown = fnDown;
  //关闭弹窗
  var oClose = document.getElementById('ui_boxyClose');
  oClose.onclick = function(){
    document.getElementById('loginPanel').style.display = 'none';
  }
  //切换状态
  var loginState = document.getElementById('loginstate'),
    stateList = document.getElementById('loginStatePanel'),
    lis = stateList.getElementsByTagName('li'),
    stateTxt = document.getElementById('login2qq_state_txt'),
    loginStateShow = document.getElementById('login-state_show');
  loginState.onclick = function(e){
    //阻止冒泡到document使ul隐藏;
    e = e || window.event;
    if(e.stopPropagation){
      e.stopPropagation();
    }esle{
      e.cancleBubble = true;
    }
    stateList.style.display = "block";
  }
  //鼠标滑过/离开和点击状态列表时
  for(var i=0,i<lis.length,i++){
    lis[i].onmouseover = function(){
      this.style.background = "#567";
    }
    lis[i].onmouseout = function(){
      this.style.background = "#fff";
    }
    lis[i].onclick = function(e){
      //阻止冒泡到loginState使stateList显示;
      e = e || window.event;
      if(e.stopPropagation){
        e.stopPropagation();
      }esle{
        e.cancleBubble = true;
      }
      var id = this.id;
      stateList.style.display = "none";
      stateTxt.innerHTML = getClass('stateSelect_text',id)[0].innerHTML;
      loginStateShow.className = '';
      loginStateShow.className = 'login-state-show '+id;
    }
  }
  document.onclick = function(){
    stateList.style.display = "none";
  }
}
//鼠标按下事件;
function fnDown(event){
  event = event || window.event;
  var oDrag = document.getElementById('loginPanel'),
      //鼠标按下时,鼠标和面板之间的距离;
      disX = event.clientX - oDrag.offsetLeft,
      disY = event.clientY - oDrag.offsetTop;
  //移动
  document.onmouseover = function(event){
    event = event || window.event;
    fnMove(event,disX,disY);
  }
  //释放鼠标
 document.onmouseup = function(){
  document.onmouseover = null;
  document.onmouseup = null;
  }
}
//鼠标移动事件;
function fnMove (e,posX,posY){
  var oDrag = document.getElementById('loginPanel'),
      l = e.clientX-posX,
      t = e.clientY-posY,
      winW = document.documentElement.clientWidth || document.body.clientWidth,
   winH = document.documentElement.clientHeight || document.body.clientHeight;
   maxW = winW-oDrag.offsetWidth,
   maxH = winH-oDrag.offsetHeight;
 if(l<0){
   l = 0;
 }else if(l>maxW){
   l = maxW;
 }
 if(t<0){
   t = 0;
 }else if(t>maxH){
   t=maxH;
 }
  oDrag.style.left = l+'px';
  oDrag.style.top = t+'px';
}

제4장 추첨제도

>1.키보드 이벤트

>>1.keyDown: 사용자가 키보드의 아무 키나 누를 때 트리거되고, 사용자가 해당 키를 누르고 있으면 이 이벤트가 반복적으로 트리거됩니다.

>>2.keyPress: 사용자가 키보드의 문자 키를 누를 때 트리거되고, 길게 누르면 이 이벤트가 반복적으로 트리거됩니다.

>>3.keyUp: 사용자가 키보드의 키를 놓을 때 트리거됩니다.

>2. 추첨 절차