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

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

다음은 GetEventTarget 기능을 호출하는 EditCell 함수입니다. 대상 요소에 대한 참조가 있으면 요소가 우리가 기대하는 요소인지 확인하는 것은 다음과 같습니다. if (target.tagname.tolowercase () === 'td') {// 셀로 무언가를 수행}}}

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

장단점은 무엇입니까?

JavaScript 이벤트 대표단의 이점은 다음과 같습니다. 이것은 큰 것입니다. 성능이 향상되고 충돌이 줄어 듭니다.

DOM 업데이트 후 핸들러를 다시 부를 필요는 없습니다. 예를 들어 Ajax를 통해 페이지 컨텐츠가 동적으로 생성되면 요소가로드되거나 언로드 될 때 이벤트 핸들러를 추가 및 제거 할 필요가 없습니다.

잠재적 인 문제는 덜 명확하지 않을 수 있지만, 일단 알고 있으면 쉽게 피할 수 있습니다. 버블. 흐림, 초점,로드 및 언로드 이벤트는 다른 이벤트와 마찬가지로 거품이되지 않습니다. 블러 및 포커스 이벤트는 버블 링 단계 대신 캡처 단계 (IE 이외의 브라우저에서)를 사용하여 실제로 액세스 할 수 있지만 다른 날의 이야기입니다.

마우스 이벤트를 관리 할 때는주의해야합니다. 코드가 MouseMove 이벤트를 처리하는 경우 MouseMove 이벤트가 너무 자주 트리거되기 때문에 성능 병목 현상을 만들 위험이 심각합니다. 마우스 아웃 이벤트에는 이벤트 대표단으로 관리하기 어려운 기발한 행동이 있습니다.

요약

주요 라이브러리를 사용하는 JavaScript 이벤트 대표 예제가 있습니다 : jQuery, 프로토 타입 및 야후! UI. 사용 가능한 유형 블로그의 라이브러리와 같은 라이브러리가 전혀없는 예제를 찾을 수 있습니다.

이벤트 대표단은 키트에 필요한 도구가 필요하고 구현하기 쉬운 일이 발생 해야하는 편리한 도구입니다.

자바 스크립트 이벤트 위임에 대한 자주 묻는 질문

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

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

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

javaScript의 모든 이벤트와 함께 이벤트 대표단을 사용할 수 있습니까?

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

JavaScript에서 이벤트 버블 링을 중지하는 방법

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

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

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

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

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

JavaScript의 '이'키워드와 함께 이벤트 대표단을 사용할 수 있습니까?

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

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

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

이벤트 대표단 사용의 성능은 무엇입니까?

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

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

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