jQuery_jquery에서 이벤트 객체 e의 이벤트 버블링 사용 예 소개

이전에 매뉴얼을 확인했을 때 이벤트 객체의 개념을 보지 못했고, 그 당시 제가 원했던 것은 텍스트 상자를 클릭하여 드롭다운 다중 선택 상자를 표시하는 것이었습니다. Blur 이벤트가 트리거되어 드롭다운 상자가 숨겨집니다. 그런데 다중 선택 상자를 선택하려고 하면 숨겨져 있어서 선택할 수 없습니다. 하루 동안 정보를 확인하다 보니 결국 정신이 나갔습니다. 인터넷에서 이벤트 버블링 항목을 발견하고 이를 클릭하면 이 기능을 수행할 수 있다는 것을 알았습니다.

e.stopPropagation()은 이벤트 버블링을 방지합니다

코드 복사 코드는 다음과 같습니다.

<제목>



다음과 같은 상황이 표시됩니다. 이를 이벤트 버블링이라고 합니다. 즉, 아래에서 위로, 내부에서 외부로 이벤트가 순차적으로 발생합니다. 순차적으로 실행될 수 있는 조건은 동일한 이벤트가 포함된 여러 개의 중첩 태그입니다. 모든 이벤트는 동시에 동시에 발생하며 동일한 이벤트에 대한 응답은 내부에서 구현됩니다.

이벤트가 터지는 것을 원하지 않으면 어떻게 해야 하나요?

코드 복사

코드는 다음과 같습니다.


문서 전체에 대해 클릭 이벤트를 구현하면 이벤트가 발생하는 것을 방지할 수 있습니다. 텍스트 상자와 드롭다운 상자에 추가하면 다시 클릭해도 문서가 이벤트를 트리거하지 않습니다.

이벤트 관련 정보를 얻으려면 지식 메소드에 e 객체를 추가해야 하며 e가 이벤트 객체입니다.

e.preventDefault()는 이벤트 기본 동작을 방지합니다.




코드 복사

코드는 다음과 같습니다. $("a").click( function (e ) { alert("기본 동작은 금지됩니다.")

e.preventDefault()

})
Test


return false는 e.preventDefault() 및 e.stopPropagation()을 동시에 호출하는 것과 같습니다.

return false 기본값을 방지하는 것 외에도 행동, 또한 이벤트가 발생하는 것을 방지합니다. jquery 소스코드가 있다면 다음 코드를 확인하실 수 있습니다.

코드 복사

코드는 다음과 같습니다. if (ret===false){ Event.preventDefault()

event.stopPropagation();