집 > 기사 > 웹 프론트엔드 > JS 이벤트 전파, 이벤트 기본 동작 취소 및 이벤트 전파 방지에 대한 자세한 설명

JS 이벤트 전파, 이벤트 기본 동작 취소 및 이벤트 전파 방지에 대한 자세한 설명

韦小宝원래의: 2018-01-22 09:58:301886검색

이 글에서는 주로 이벤트 전파, 이벤트의 기본 동작 취소, 이벤트 전파 방지를 위한 JS를 소개합니다. 자세한 프로세스는 이벤트 처리프로그램의 반환 값 호출 시퀀스를 통해 설명됩니다. JS에 관심이 있는 친구들은 이 글을 참고하세요.

1. 이벤트 핸들러의 반환 값

일반적으로 반환 값 false는 브라우저에게 이 이벤트와 관련된 기본 작업을 수행하지 않도록 지시합니다. 예를 들어, 양식 제출 버튼의 onclick 이벤트 핸들러는 false를 반환하여 브라우저가 양식을 제출하는 것을 방지할 수 있고, a 태그의 onclick 이벤트 핸들러는 false를 반환하여 href 페이지로 이동하는 것을 방지할 수 있습니다. 마찬가지로 입력 필드의 onkeypress 이벤트 핸들러는 사용자가 부적절한 문자를 입력하는 경우 false를 반환하여 키보드 입력을 필터링할 수 있습니다.
이벤트 핸들러의 반환 값은 속성을 통해 등록된 핸들러에 대해서만 의미가 있습니다.

2. 호출 순서

문서 요소 또는 기타 개체는 지정된 이벤트 유형에 대해 여러 이벤트 핸들러를 등록할 수 있습니다. 적절한 이벤트가 발생하면 브라우저는 다음 규칙에 따라 모든 이벤트 핸들러를 호출해야 합니다.

객체 속성 설정 또는 HTML 속성을 통해 등록된 핸들러는 항상 먼저 호출됩니다.
addEventListener()를 사용하여 등록된 핸들러는 등록된 순서대로 호출됩니다.
attachEvent()를 사용하여 등록된 핸들러는 순서에 관계없이 호출될 수 있으므로 코드는 호출 순서에 의존해서는 안 됩니다.

3. 이벤트 전파

대상 요소에 등록된 이벤트 핸들러 함수를 호출한 후 대부분 이벤트는 DOM 트리의 루트까지 "버블업"됩니다. 대상의 상위 요소에서 이벤트 핸들러를 호출한 다음 대상의 조부모 요소에 등록된 이벤트 핸들러를 호출합니다. 이는 Document 개체까지 이어지며 마지막으로 Window 개체까지 이어집니다.

초점, 흐림 및 스크롤 이벤트를 제외하고 문서 요소에서 발생하는 대부분의 이벤트는 버블링됩니다. 문서 요소의 로드 이벤트는 버블링되지만 Document 객체에서는 버블링을 중지하고 Window 객체로 전파되지 않습니다. Window 객체의 로드 이벤트는 전체 문서가 로드될 때만 트리거됩니다.

4. 기본 이벤트 동작 취소 및 이벤트 전파 방지

addEventListener()를 지원하는 브라우저에서는 이벤트 객체의 PreventDefault() 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있습니다. IE9 이전의 IE에서는 이벤트 객체의 returnValue 속성을 false로 설정하면 동일한 효과를 얻을 수 있습니다. 다음 코드는 이벤트를 취소하는 세 가지 기술을 결합합니다.

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

이벤트 취소와 관련된 기본 작업은 이벤트 취소 중 하나일 뿐이며 이벤트 전파도 취소할 수 있습니다. addEventListener()를 지원하는 브라우저에서는 이벤트 객체의 stopPropagation() 메서드를 호출하여 이벤트가 계속 전파되는 것을 방지할 수 있습니다. 동일한 객체에 다른 핸들러가 정의된 경우 나머지 핸들러는 계속 호출되지만 다른 객체의 이벤트 핸들러는 stopPropagation()을 호출한 후에 호출되지 않습니다.

IE9 이전의 IE는 stopPropagation() 메서드를 지원하지 않지만, 이벤트가 더 이상 전파되는 것을 방지하기 위해 이벤트 객체의 cancelBubble 속성을 true로 설정합니다.

그럼 위 내용은 모두 편집자가 정리한 내용이니 많은 분들께 도움이 되었으면 좋겠습니다~

JS 이벤트 전파, 이벤트 기본 동작 취소 및 이벤트 전파 방지에 대한 자세한 설명

관련 기사