JavaScript 이벤트에 대해 이야기 할 때 인터뷰 나 매일 작업에 관계없이 이벤트 버블, 이벤트 캡처 및 기본 이벤트 차단의 세 가지 주제를 피하기가 어렵습니다.
1. 이벤트 거품
코드를 살펴 보겠습니다.
var $ input = document.getElementsByTagName ( "input") [0]; var $ div = document.getElementsByTagName ( "div") [0]; var $ body = document.getElementsByTagName ( "Body") Window.e; Alert ( "Red")} $ div.onclick = function (e) {this.style.border = "5px solid green"alert ( "green")} $ body.onclick = function (e) {this.style.border = "5px solid yellow"alert ( "Yellow")}HTML 코드
<div> <입력 유형 = "버튼"value = "테스트 이벤트 버블" /> < /div> "빨간색", "녹색", "노란색"이 차례로 나타납니다.
원래 의도는 버튼 요소를 트리거하는 것이지만 부모 요소에 바인딩 된 이벤트와 함께 트리거됩니다. 이것은 이벤트 버블입니다.
입력에 대한 이벤트 바인딩이 다음으로 변경되는 경우
$ input.onclick = function (e) {this.style.border = "5px solid red"var e = e || Window.e; Alert ( "Red") E.StopPropagation ();}현재 "빨간색"만이 이벤트가 거품이 나기 때문에 팝업됩니다.
2. 이벤트 캡처
이벤트의 버블 링이 있으므로 역 프로세스 인 이벤트가 캡처 될 수 있습니다. 차이는 상단 요소에서 대상 요소에 이르기까지 또는 대상 요소에서 상단 요소까지입니다.
코드를 보자 :
$ input.adeventListener ( "click", function () {this.style.border = "5px solid red"; alert ( "red"}}, true) $ div.adeventListener ( "click", function () {this.style.border = "5px solid green"; "green"), true) $ body.addeventevente. this.style.border = "5px solid 옐로우";현재 "노란색", "녹색", "빨간색"이 하나씩 나타납니다. 이는 이벤트의 캡처입니다.
3. 기본 이벤트를 차단하십시오
A 태그와 같은 HTML 요소의 기본 동작이 있으며 클릭 후 점프 작업이 있습니다. 양식의 제출 유형 입력에는 기본 제출 점프 이벤트가 있습니다. 재설정 유형 입력에는 재설정 양식 동작이 있습니다. 이러한 브라우저 기본 동작을 차단하려면 JavaScript가 메소드를 제공합니다.
var $ a = document.getElementsByTagName ( "a") [0]; $ a.onclick = function (e) {alert ( "점프 동작이 나에 의해 차단되었습니다") e.preventDefault (); // false를 반환합니다; // 가능합니다} <a href = "http://keleyi.com"> Ke Leyi </a> 기본 이벤트가 사라졌습니다.Return False 및 E.PreventDefault ()가 같은 효과를 갖기 때문에 차이가 있습니까? 물론 있습니다.
이벤트 호스트의 기본 동작은 HTML 이벤트 속성 및 DOM0 수준 이벤트 처리 방법에서만 구성 할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.