Javascript 이벤트 프록시 심층 분석_기본 지식

저는 오랫동안 이벤트 발생과 이벤트 도착 사이에 차이가 없다고 느껴왔습니다.

최근에 다시 살펴보니 차이가 별로 크지 않은 것 같아요! 당신이 그것을 어떻게 이해하는지 봅시다.

이벤트 에이전트가 무엇인지 이해하려면 먼저 에이전트가 무엇인지 이해해야 합니다.

비즈니스 관점에서 대리인은 다음과 같습니다. 나에게는 상품이 있지만 귀하에게는 상품이 없지만 모든 상품을 판매할 시간이나 에너지가 없으며 귀하에게는 너무 많은 자유 시간이 있습니다. 당신에게는 시간밖에 없습니다. 그래서 나는 당신이 그것을 구입할 수 있도록 도와주고 수수료를 줄 것입니다. 이 과정에서 실제로 상품을 갖게 됩니다.

알겠습니다. 이벤트 에이전트라는 용어의 문자적 의미를 어떻게 이해하시나요? 이에 대해서는 나중에 자세히 설명합니다.

1 먼저 초보자가 클릭 이벤트를 바인딩하는 실제 예를 살펴보겠습니다.

이전 동작을 따른 경우 각 li 태그에 onlick을 어떻게 추가합니까? 말도 안 되는 소리, 만약 나라면 분명 단순하고 투박할 것이다.
각 li을 반복한 다음 모두 onlick에 바인딩합니다.

따라서 내 코드는 다음과 같아야 합니다.

<ul id="thl">
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

<script>
  var thl= document.getElementById('thl');
  var aLi = thl.getElementsByTagName('li');
  for (var i = 0; i < aLi.length; i++) {
  　　aLi[i].onclick = fn;
  }
  
  function fn (){
   console.log("maomaoliang");
  }
</script>

모든 것이 괜찮은 것 같습니다. 일부 기사에서는 이것이 성능을 소모한다고 말하지만 내 컴퓨터는 좋고 당신의 성능에는 관심이 없으므로 너무 심각하게 받아들일 수는 없습니다.

2 어느 날 갑자기 js를 통해 추가된 새로운 li가 onlcik에 바인딩되어 있지 않다는 것을 발견했습니다

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

그럼 마오마리앙을 클릭해도 온릭이 묶이지 않는 이유는 무엇일까요?
아, 원래의 li와 나중에 생성된 li가 동시에 발생하지 않은 것으로 나타났습니다. 새로운 li 요소가 생성되기 전에는 기존 li에 이벤트가 추가되었습니다. 알았어, 정말 짜증나.

셋 어떻게 깨뜨릴까?

그러다가 몇몇 기사를 읽다가 이벤트 프록시라는 것이 있다는 걸 알게 됐어요. 한번 해볼게! 그래서 다음과 같이 코드의 일부를 다시 작성했습니다.

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     fn();
   }
};

function fn (){
 console.log("maomaoliang");
}

결과적으로 새로운 li를 클릭해도 fn 기능이 실행되었습니다. 글쎄, 호기심에 사로잡힌 몸으로서 어떻게 더 많은 설명을 요구하지 않을 수 있겠는가? 당신은 여전히 ​​좀 더 실용적이어야 하고 그 뒤에 숨은 미스터리를 이해해야 합니다.

그래서 행사요원의 정보를 살펴봤습니다.

먼저 이벤트 버블링이 무엇인지 알아야 합니다. 예를 들어 마우스로 버튼을 클릭하는 등 요소에서 이벤트가 트리거되면 해당 요소의 모든 상위 요소에서 동일한 이벤트가 트리거됩니다. 이 프로세스를 이벤트 버블링이라고 합니다.

그럼 이전 질문인 "이벤트 에이전트라는 용어의 의미를 문자 그대로 이해하는 방법"으로 돌아가서, 누가 이벤트를 에이전트했습니까? 아니면 그 사건은 누구를 대표하는가?
이 기사의 예를 들어 수정된 코드를 살펴보면 onlick 이벤트를 li 태그 대신 ul 태그에 바인딩했습니다. 따라서 li 태그(동적으로 생성되었거나 이전에 존재했는지 여부)를 클릭하면 이 이벤트는 거품처럼 팝업되고 팝업됩니다. 일반적인 상황에서는 ul도 onclick에 바인딩되고 body도 onclick에 바인딩됩니다. 즉, 최상위 요소에 버블링됩니다. 하지만 여기에서는 onlick을 ul에 바인딩했으므로 이때 ul이 버블을 가로채고 이벤트 상승이 중지되며 body 태그에 도달할 수 없습니다.

그럼 var target = ev.target || ev.srcElement; 이 문장은 내가 누구를 클릭했는지, 누가 타겟인지 알려주는 것과 같습니다. 이 대상이 li 태그인 경우(target.nodeName.toLowerCase() == 'li') fn 함수를 실행합니다.

마지막으로 저는 그 질문에 자랑스럽게 대답했습니다. 테이블은 onlick 이벤트를 나타냅니다!

4 이벤트 프록시 단계를 상기하세요

상위 요소 바인딩 이벤트
상위 요소는 이벤트의 실제 대상이 누구인지 알고 있습니다
대상을 판단해야 합니다. 필요한 요소인 경우 콜백 함수가 발생합니다. (따라서 선택기 사용법을 배워야 합니다.)

5 최종 요약, 이벤트 대행사의 2가지 장점

실수로 성능이 최적화되었습니다
동적으로 추가된 요소를 이벤트에 바인딩할 수도 있습니다

주의할 점 6가지

위 내용은 jquery를 사용하는 경우 기본 js 이벤트 바인딩에 대한 것입니다. 그리고 코드를 다음과 같이 변경했습니다.

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     //li添加的事件
     fn();
   }
};*/

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

function fn (){
 console.log("maomaoliang");
}

$("#ul1").click(function(){
  fn();
});

이렇게 하면 새로 추가된 li 태그도 클릭으로 묶을 수 있으니 참 편리하고 간단하지 않나요?

하하, 이런 생각이 드는 게 당연해요. 저도 예전에는 그렇게 생각했는데, 몇 가지 만들어 보고 나니 jquery로는 정말 부족하다는 걸 느꼈어요! 하지만 기본적으로는 충분합니다!

마스터들이 js를 배워야 한다고 하지만, 그래도 jquery를 먼저 배우고 나중에 js를 배우면 효과가 좋을 것 같아요.