JavaScript 이벤트 위임_javascript 기술의 기술 원리 예

오늘날 JavaScript 기술 세계에서 가장 핫한 기술 중 하나는 바로 '이벤트 위임'입니다. 이벤트 위임 기술을 사용하면 특정 각 노드에 이벤트 리스너를 추가하는 것을 방지할 수 있으며 대신 이벤트 리스너가 해당 상위 요소에 추가됩니다. 이벤트 리스너는 하위 요소에서 버블링되는 이벤트를 분석하고 해당 이벤트가 어느 하위 요소에서 발생하는지 알아냅니다. 기본 개념은 매우 간단하지만 이벤트 위임이 어떻게 이루어지는지 아직 이해하지 못하는 분들이 많습니다. 여기서는 이벤트 위임이 어떻게 작동하는지 설명하고 순수 JavaScript로 기본 이벤트 위임에 대한 몇 가지 예를 제공하겠습니다.

여러 하위 요소가 있는 UL 요소가 있다고 가정합니다.

코드 복사 코드는 다음과 같습니다.

• 항목 1


• 항목 2


• 항목 3


• 항목 4< ; /li>
  
• 항목 5


• 항목 6
; /ul>

또한 각 하위 요소를 클릭하면 다른 이벤트가 발생한다고 가정합니다. 각각의 독립적인 li 요소에 이벤트 리스너를 추가할 수 있지만 때로는 이러한 li 요소가 삭제되거나 추가될 수 있으며 새 이벤트나 삭제된 이벤트를 듣는 것이 악몽이 될 수 있습니다. 특히 이벤트를 듣는 코드가 다른 요소에 배치된 경우에는 더욱 그렇습니다. 신청서에 넣으세요. 하지만 상위 요소에 리스너를 배치하면 어떻게 될까요? 어떤 하위 요소가 클릭되었는지 어떻게 알 수 있나요?

간단함: 하위 요소의 이벤트가 상위 ul 요소까지 버블링되면 이벤트 객체의 target 속성을 확인하고 실제로 클릭된 node 요소의 참조를 캡처할 수 있습니다. 다음은 이벤트 위임 과정을 보여주는 매우 간단한 JavaScript 코드입니다.

코드 복사 코드는 다음과 같습니다.

// 상위 요소를 찾아 리스너를 추가합니다...
document.getElementById("parent-list").addEventListener("click",function(e) {
// e .target은 클릭한 요소입니다!
// li 요소를 클릭한 경우
if(e.target && e.target.nodeName == "LI") {
// 찾기 대상 및 출력 ID!
console.log("목록 항목 ",e.target.id.replace("post-"),"를 클릭했습니다!")
}
}); 🎜>


첫 번째 단계는 상위 요소에 이벤트 리스너를 추가하는 것입니다. 이벤트가 리스너를 트리거하면 이벤트 소스를 확인하고 Li가 아닌 하위 요소 이벤트를 제외하세요. li 요소라면 목표를 찾은 것입니다! li 요소가 아닌 경우 이벤트는 무시됩니다. 이 예는 매우 간단합니다. UL과 li는 표준 상위-하위 조합입니다. 다양한 요소 조합을 실험해 보겠습니다. 내부에 많은 하위 요소가 있는 상위 요소 div가 있지만 우리가 관심을 갖는 것은 "classA" CSS 클래스가 있는 내부의 A 태그입니다.

코드 복사 코드는 다음과 같습니다.

// 상위 요소 DIV 가져오기, 리스너 추가...
document.getElementById("myDiv") .addEventListener ("click",function(e) {
// e.target은 클릭된 요소입니다.
if(e.target && e.target.nodeName == "A") {
// CSS 클래스 이름 가져오기
varclasses = e.target.className.split(" ");
// 일치하는 항목을 검색하세요.
if(classes) {
// 모든 CSS 클래스에 대해 요소 has..
for(var x = 0; x // 원하는 CSS 클래스가 있는 경우...
if(classes[x] = = " classA") {
// 빙고!
console.log("앵커 요소 클릭!")

// 이제 여기서 뭔가를 하세요....

}
}
}

}
})


위의 예에서는 태그 이름뿐만 아니라 CSS 클래스 이름도 비교됩니다. 비교됩니다. 조금 더 복잡하기는 하지만 여전히 매우 대표적입니다. 예를 들어 A 태그에 스팬 태그가 있는 경우 이 스팬이 대상 요소가 됩니다. 이때 DOM 트리 구조를 추적하여 A.classA 요소가 있는지 확인해야 합니다.
이 기사가 JavaScript 이벤트 위임의 숨겨진 원리를 이해하는 데 도움이 되기를 바라며, 이벤트 위임의 강력한 사용법도 느껴보시길 바랍니다!