자바스크립트 이벤트 위임의 코드 구현 및 코드 최적화

이 글의 내용은 js 이벤트 위임의 코드 구현과 코드의 최적화에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이틀 전에 동료로부터 프로젝트를 인수받았습니다. 웹사이트 홈페이지에 달성해야 할 기능이 있습니다.

상위 요소에 마우스를 추가하면 이벤트 안팎으로 이동하여 하위 요소의 표시 및 숨기기를 제어할 수 있습니다.

html 코드에는 4개의 상위 요소 div가 있고 각 상위 요소는 하위 요소 div를 중첩합니다.

이것은 div 중 하나를 가로채는 것입니다.

# 🎜🎜#

가장 간단하고 조잡한 방법은 다음과 같습니다.

8가지 방법을 직접 작성하고 속성 스타일 블록 또는 없음.

이렇게 작성하면 간단하지만 코드 최적화 및 페이지 응답 속도로 인해 여전히 변경이 필요합니다.

동료에게 물어보니 관련 이벤트 위임 방법을 살펴보면 이 문제를 효과적으로 해결할 수 있다고 했습니다.

일부 작업 후 작성자는 다음 코드를 작성했습니다.

이렇게 작성하면 효과를 얻을 수 있지만 언제 콘솔을 확인해 보니 빨간색으로 바뀌었습니다.

이거 보니 정말 머리가 아프네요. 분명히 효과가 달성되었음에도 불구하고 여전히 오류가 보고되는 이유는 무엇입니까?

오늘 점심시간에 누워서 생각하다가 문득 영감이 떠올랐어요.

수정된 코드입니다. 읽고 나면 target이 현재 객체를 참조하기 때문이라는 것을 알게 될 것입니다.

마우스가 상위 요소 div로 이동하면 하위 요소의 p 속성이 block으로 변경되어 표시됩니다. .

그러나 하위 요소 div로 이동하면 대상이 하위 요소를 가리키고 하위 요소에는 firstElementChild가 없으므로 오류가 보고됩니다.

지금은 판단만 추가하면 됩니다. 하위 객체가 존재하지 않으면 현재 객체의 속성을 수정하세요.

그렇지 않은 경우, 즉 하위 개체가 존재하는 경우 하위 개체 속성을 수정합니다.

이틀간의 노력 끝에 마침내 이렇게 작은 코드 조각을 최적화했습니다.

원래는 for 루프를 생각했는데 이렇게 루프를 돌고 나니 아직도 DOM 연산이 많이 나오네요.

관련 권장 사항:

js로 오디오 및 비디오 컬렉션 리소스를 얻는 방법은 무엇입니까? js에서 오디오 및 비디오를 수집하는 방법

js 연산자 우선 순위 비교 및 ​​js 논리 연산자 분석

# 🎜🎜 #js 이벤트에서 이것이 무엇을 의미하나요? js에서 this의 사용법에 대한 자세한 설명(사용 예 포함)

위 내용은 자바스크립트 이벤트 위임의 코드 구현 및 코드 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!