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 클라이언트가 인터넷에 접속할 수 있는지 판단하는 방법에 대한 자세한 설명

js/css 파일

sass를 사용하기 위한 구성 방법은 무엇입니까? vue projects_vue .js

위 내용은 JS 이벤트에 대한 자세한 답변(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!