JavaScript 학습 총화 -- 이벤트 의뢰

일반적인 상황 에서 우 리 는 하나의 DOM 요소 에 대해 사건 을 연결 할 때 세 가지 방식 이 있다.

//      
<div onclick="eventFn()"></div>

aDiv=onclick=function(){
  //...  
}

aDiv.addEventListener('click',function(){
    //...
},false)

이렇게 쓰 는 것 은 아무런 문제 가 없다.
그러나 실제 개발 에서 우 리 는 십 몇 십 개의 li 요소 바 인 딩 사건 과 같은 상황, 심지어 더 많은 요 소 를 만 날 수 있 습 니 다. 그러면 사건 바 인 딩 은 모든 요소 에 순환 적 으로 연결 하 는 방식 으로 성능 에 영향 을 줄 수 있 습 니 다.
그래서 우 리 는 사건 의 거품 을 일 으 키 는 메커니즘 을 이용 하여 사건 의뢰 의 방법 을 사용 하여 과도 한 성능 손실 을 피 할 수 있다
쉽게 말 하면 사건 을 가능 한 한 등급 이 높 은 부모 요소 에 연결 시 키 는 것 이다. 요소 가 사건 을 촉발 한 후에 한 단계 씩 위로 거품 이 생 긴 다. 사건 대상 이 벤트 를 이용 하여 사건 의 거품 이 우리 가 사건 을 연결 해 야 하 는 요소 에 전파 되 는 지 여 부 를 판단 하 는 것 이다.
밤 을 들다

//     html  
<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

마우스 가 들 어 갈 때마다 li 요 소 를 옮 겨 li 의 배경 색 을 바 꿔 야 합 니 다.
우선 우 리 는 전통 적 인 사건 바 인 딩 을 이용 하여 만 듭 니 다. 코드 는 다음 과 같 습 니 다.

var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");

for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
}

사건 의뢰 를 통 해 이 루어 지 는 것 은 이 렇 습 니 다.

var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
//         ul 
oUl.onmouseover=function(e){
    //                  
  var ev=e||window.event;  
  var target = ev.target || ev.srcElement;
  //         
  if(target.nodeName.toLowerCase() == "li"){
  //           li    
    target.style.background = "red";
   }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
}

이렇게 쓰 는 것 은 보기에 많이 번 거 로 워 보이 지만, 실제로는 우리 에 게 많은 성능 손실 을 절약 할 수 있다.
사건 의뢰 에는 또 다른 이점 이 있다.
전통 적 인 이벤트 바 인 딩 에서 만약 에 위의 l 중의 li 요소 수량 이 고정 되 지 않 는 다 면 실제 운행 에서 동적 으로 추 가 된 li 요소 가 생 길 수 있 습 니 다.
그러면 이 때 이벤트 바 인 딩 은 동적 으로 생 성 된 li 요소 바 인 딩 이벤트 에 연결 할 수 없 기 때문에 이벤트 의뢰 로 새로 생 성 된 요소 에 이 벤트 를 추가 해 야 합 니 다.