JavaScript 이벤트 대표는 생각보다 쉽습니다

주요 테이크 아웃

• JavaScript Event Delegation은 필요한 이벤트 처리기의 수를 줄임으로써 성능을 향상시키는 기술입니다. 개별 이벤트 핸들러를 각 요소에 첨부하는 대신 단일 이벤트 핸들러가 부모 요소에 추가되어 모든 하위 요소에 대한 이벤트를 처리합니다.
• 이벤트 대표단은 이벤트 버블 링 및 대상 요소를 통해 작동합니다. 이벤트가 트리거되면 이벤트 버블 링으로 알려진 모든 요소의 조상에서도 활성화됩니다. 이벤트의 원래 요소 인 대상 요소는 이벤트 객체의 속성에 저장되어 이벤트가 시작된 위치를 결정할 수 있습니다.
• 이벤트 대표단은 성능을 향상시키고 메모리 사용량을 줄이고 모든 이벤트 버블이 아니라 일부 마우스 이벤트를 처리하면 성능 병목 현상이 될 수 있습니다. 따라서 이러한 잠재적 인 문제를 피하기 위해 이벤트 위임 코드를 신중하게 관리하는 것이 중요합니다.

웹 페이지에 약간의 JavaScript 인터랙티브를 추가하고 있다면 JavaScript 이벤트 대표단에 대해 들었을 수 있으며, 복잡한 디자인 패턴 중 하나라고 생각했습니다. 진실은 이미 JavaScript 이벤트 처리기를 추가하는 방법을 알고 있다면 구현하기위한 스냅입니다.

JavaScript 이벤트는 웹 페이지의 모든 상호 작용의 기반입니다 (Dinky CSS 드롭 다운 메뉴가 아니라 심각한 상호 작용을 의미합니다). 전통적인 이벤트 처리에서는 필요에 따라 각 요소에서 이벤트 처리기를 추가하거나 제거합니다. 그러나 이벤트 핸들러는 잠재적으로 메모리 누출 및 성능 저하의 원인을 만들 수 있습니다. JavaScript Event Delegation은 여러 하위 요소에 이벤트 처리기를 추가하지 않도록 단일 이벤트 핸들러를 부모 요소에 추가하는 간단한 기술입니다.

어떻게 작동합니까?

이벤트 대표단은 JavaScript 이벤트의 종종 간과되는 두 가지 기능인 이벤트 버블 링 및 대상 요소를 사용합니다. 예를 들어 마우스 버튼을 클릭하는 등 요소에서 이벤트가 트리거되면 해당 요소의 모든 조상에서 동일한 이벤트가 트리거됩니다. 이 과정은 이벤트 버블 링이라고합니다. 이벤트는 원래 요소에서 돔 트리의 상단까지 기발합니다. 모든 이벤트의 대상 요소는 기원 요소, 본 예제의 버튼이며 이벤트 객체의 속성에 저장됩니다. 이벤트 대표단을 사용하면 이벤트 핸들러를 요소에 추가하고, 이벤트가 어린이 요소에서 거품을 일으킬 때까지 기다렸다가 이벤트가 시작된 요소에서 쉽게 결정할 수 있습니다.

어떻게 도움이 될까요?

사용자가 테이블 셀을 클릭 할 때 10 개의 열과 100 개의 행이있는 HTML 테이블을 상상해보십시오. 예를 들어, 나는 한 번 클릭 할 때 그 크기의 테이블의 각 셀을 편집 할 수 있도록해야했습니다. 1000 셀 각각에 이벤트 처리기를 추가하는 것은 주요 성능 문제이며 잠재적으로 브라우저 크래시 메모리 누출의 원인이 될 수 있습니다. 대신, 이벤트 대표단을 사용하면 테이블 요소에 하나의 이벤트 핸들러 만 추가하고 클릭 이벤트를 가로 채고 클릭 한 셀을 결정합니다.

코드에서 어떻게 생겼습니까?

코드는 간단합니다. 대상 요소를 감지하는 것에 대해서만 걱정하면됩니다. ID "보고서"가있는 테이블 요소가 있고 EditCell 기능을 호출 할 클릭 이벤트의 테이블에 이벤트 핸들러를 추가했다고 가정 해 봅시다. EditCell 함수는 테이블에 거품이 든 이벤트의 대상 요소를 결정해야합니다. 이 기능이 필요한 몇 가지 이벤트 핸들러 기능을 작성할 것으로 예상되면 GetEventTarget이라는 별도의 기능으로 배치합니다.

 함수 getEventTarget (e) {
  e = e || Window.event;
  반환 e.target || e.srcelement;
}

변수 e는 이벤트 객체를 나타내며 인터넷 익스플로러의 SRCelement 속성에 저장된 대상 요소와 다른 브라우저의 대상 속성에 저장된 대상 요소에 액세스하고 반환하기 위해 크로스 브라우저 코드를 뿌려야합니다.

다음은 geteventTarget 함수를 호출하는 editcell 함수입니다. 대상 요소에 대한 참조가 있으면 요소가 우리가 기대하는 요소인지 확인하는 것은 다음과 같습니다.

 함수 editcell (e) {
  var target = geteventTarget (e);
  if (target.tagname.tolowercase () === 'td') {
    // 셀로 무언가를합니다
  }
}

EditCell 함수에서 우리는 타겟 요소가 태그 이름을 확인하여 테이블 셀임을 확인합니다. 그 수표는 과도하게 단순화 될 수 있습니다. 이벤트의 대상 인 테이블 셀 내부의 또 다른 요소라면 어떨까요? 부모 TD 요소를 찾기 위해 코드를 추가하는 빠른 수정이 필요할 수 있습니다. 일부 셀을 편집 할 수 없다면 어떻게해야합니까? 이 경우 특정 클래스 이름을 편집 할 수없는 셀에 추가하고 대상 요소에 편집하기 전에 해당 클래스 이름 값이 없는지 확인할 수 있습니다. 많은 옵션을 사용할 수 있으며 응용 프로그램에 맞는 옵션을 선택하면됩니다.

장단점은 무엇입니까?

JavaScript 이벤트 대표의 이점은 다음과 같습니다.

• 메모리에 설정하고 상주 할 이벤트 핸들러가 적습니다. 이것은 큰 것입니다. 더 나은 성능과 충돌이 적습니다.
• DOM 업데이트 후 핸들러를 다시 붙일 필요가 없습니다. 예를 들어 AJAX를 통해 페이지 컨텐츠가 동적으로 생성되면 요소가로드되거나 언로드되어 이벤트 핸들러를 추가 및 제거 할 필요가 없습니다.

잠재적 인 문제는 덜 명확 할 수 있지만 일단 당신이 그들을 알게되면 쉽게 피할 수 있습니다.

• 이벤트 관리 코드가 성능 병목 현상이 될 위험이 있으므로 가능한 한 마른 상태로 유지하십시오.
• 모든 이벤트가 거품이 아닙니다. 흐림, 초점,로드 및 언로드 이벤트는 다른 이벤트와 마찬가지로 거품이되지 않습니다. 블러 및 포커스 이벤트는 버블 링 단계 대신 캡처 단계 (IE 이외의 브라우저)를 사용하여 실제로 액세스 할 수 있지만 다른 날의 이야기입니다.
• 마우스 이벤트를 관리 할 때는주의해야합니다. 코드가 MouseMove 이벤트를 처리하는 경우 MouseMove 이벤트가 너무 자주 트리거되기 때문에 성능 병목 현상을 만들 위험이 심각합니다. 마우스 아웃 이벤트에는 이벤트 대표단으로 관리하기 어려운 기발한 행동이 있습니다.

요약

주요 라이브러리를 사용하는 JavaScript Event Delegation 예제가 있습니다 : JQuery, Prototype 및 Yahoo! UI. 사용 가능한 유형 블로그의 라이브러리와 같은 라이브러리가 전혀없는 예제를 찾을 수 있습니다.

이벤트 대표단은 키트에 필요한 도구입니다.

JavaScript 이벤트 대표단에 대해 자주 묻는 질문

JavaScript에서 이벤트 대표단을 사용하면 주요 장점은 무엇입니까?

JavaScript의 이벤트 대표단은 이벤트 버블 링 프로세스를 활용하는 기술입니다. 이벤트 대표단을 사용하는 주요 장점은 요소에 첨부 된 이벤트 리스너 수를 줄임으로써 성능을 크게 향상 시킨다는 것입니다. 개별 이벤트 리스너를 각 요소에 첨부하는 대신 단일 이벤트 리스너를 상위 요소에 첨부합니다. 그런 다음이 청취자는 모든 어린이 요소에 대한 이벤트를 처리합니다. 이것은 목록 항목 또는 테이블 행과 같은 많은 유사한 요소를 다룰 때 특히 유리합니다.

이벤트 대표단은 JavaScript에서 어떻게 작동합니까?

이벤트 대표단은 JavaScript의 이벤트 버블 링 프로세스를 활용하여 작동합니다. 어린이 요소에서 이벤트가 발생하면 Dom Tree를 통해 기발하여 각 상위 요소에서 동일한 이벤트를 트리거합니다. 이벤트 리스너를 부모 요소에 첨부하면 모든 어린이 요소에 대한 이벤트를 처리 할 수 ​​있습니다. 이벤트 핸들러에 전달 된 이벤트 객체에는 '대상'속성이 포함되어 있으며 이벤트를 트리거 한 실제 요소를 나타냅니다. 이 속성을 사용하여 이벤트 처리 방법을 결정할 수 있습니다.

행사 대표단이 JavaScript의 이벤트와 함께 사용할 수 있습니까?

예, 이벤트 대표단은 거품이있는 JavaScript의 모든 이벤트와 함께 사용할 수 있습니다. 그러나 모든 이벤트가 거품이 아닙니다. 예를 들어, '초점'및 '블러'이벤트는 모든 브라우저에서 기포되지 않습니다. 이러한 이벤트의 경우 'Focusin'및 'Focusout'이벤트를 대신 사용할 수 있습니다.

JavaScript에서 이벤트 버블 링을 어떻게 중지하려면?

이벤트 객체의 'stoppropagation'메소드를 사용하여 JavaScript에서 이벤트 버블 링을 중지 할 수 있습니다. 이 방법은 이벤트가 DOM 트리를 거품이 내지 못하게합니다. 그러나이 방법을 사용할 때는 다른 이벤트 핸들러가 트리거되는 것을 방지 할 수 있으므로주의하십시오.

JavaScript에서 이벤트 대표단과 이벤트 바인딩의 차이점은 무엇입니까?

JavaScript의 이벤트 바인딩에는 이벤트 리스너를 요소에 직접 연결하는 것이 포함됩니다. 이 리스너는이 특정 요소의 이벤트 만 처리합니다. 반면, 이벤트 대표단에는 이벤트 리스너를 부모 요소에 첨부하는 것이 포함되며, 모든 어린이 요소에 대한 이벤트를 처리합니다. 이 기술은 특히 많은 수의 유사한 요소를 다룰 때 더 효율적입니다.

동적으로 추가 된 요소가있는 이벤트 대표단을 사용할 수 있습니까?

예, 이벤트 대표단의 주요 이점 중 하나는 동적으로 추가 된 요소와 함께 작동한다는 것입니다. 이벤트 리스너는 상위 요소에 첨부되므로 청취자가 첨부 된 후 DOM에 추가되는 하위 요소의 이벤트를 처리 할 수 ​​있습니다.

JavaScript의 'This'키워드와 함께 이벤트 위임을 어떻게 사용할 수 있습니까?

이벤트 대표단을 사용할 때, 이벤트 핸들러 내부의 '이'키워드는 이벤트 리스너가 첨부 된 요소가 아니라 이벤트를 트리거 한 요소를 나타냅니다. 이벤트를 트리거 한 요소를 참조하려면 이벤트 객체의 '대상'속성을 사용할 수 있습니다.

jQuery와 함께 이벤트 대표단을 사용할 수 있습니까?

예, JQuery는 이벤트 대표단을 구현하는 데 사용할 수있는 '.on ()'메소드를 제공합니다. '.on ()'메소드는 세 가지 인수, 즉 이벤트 유형, 자식 요소의 선택기 및 이벤트 핸들러를 취합니다.

이벤트 대의원을 사용하면 성능이 어떤 영향을 미칩니 까?

이벤트 대표단은 특히 많은 수의 유사한 요소를 다룰 때 성능을 크게 향상시킬 수 있습니다. 단일 이벤트 리스너를 상위 요소에 첨부하면 브라우저에서 관리 해야하는 이벤트 리스너 수를 줄여 성능이 눈에 띄게 향상 될 수 있습니다.

JavaScript의 사용자 정의 이벤트와 함께 이벤트 대표단을 사용할 수 있습니까?

예, JavaScript의 사용자 정의 이벤트와 함께 이벤트 대표단을 사용할 수 있습니다. 내장 이벤트와 마찬가지로 사용자 정의 이벤트를 사용하면 DOM 트리를 기포하여 부모 요소에 연결된 단일 이벤트 리스너로 처리 할 수 ​​있습니다.

위 내용은 JavaScript 이벤트 대표는 생각보다 쉽습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!