JavaScript 이벤트 버블링, 이벤트 캡처 및 차단 기본 이벤트 코드 예제

JavaScript의 이벤트를 이야기하면 이벤트 버블링, 이벤트 캡처, 기본 이벤트 차단이라는 세 가지 주제는 인터뷰에서나 일상 업무에서나 피하기 어렵습니다.

버블

먼저 예를 살펴보겠습니다.

js:

var $input = document.getElementsByTagName("input")[0];
        var $p = document.getElementsByTagName("p")[0];
        var $body = document.getElementsByTagName("body")[0];

        $input.onclick = function(e){
            this.style.border = "5px solid red"
            var e = e || window.e;
            alert("red")
        }
        $p.onclick = function(e){
            this.style.border = "5px solid green"
            alert("green")
        }
        $body.onclick = function(e){
            this.style.border = "5px solid yellow"
            alert("yellow")
        }

html:

<p>
        <input type="button" value="测试事件冒泡" />
    </p>

팝업에 "빨간색"이 나타납니다. 또 다른 "녹색", "노란색".

원래 의도는 버튼 요소를 트리거하는 것이었지만 상위 요소에 바인딩된 이벤트와 함께 트리거되었습니다. 이것이 바로 이벤트 버블링입니다.

입력에 대한 이벤트 바인딩을

$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    alert("red")
    e.stopPropagation();
}

로 변경하면 이벤트 버블링이 방지되므로 이때 "빨간색"만 나타납니다

.

캡처

이벤트 버블링이 있으므로 이벤트 캡처도 가능합니다. 차이점은 최상위 요소에서 대상 요소까지 또는 대상 요소에서 최상위 요소까지입니다.

코드를 보면

$input.addEventListener("click", function(){
    this.style.border = "5px solid red";
    alert("red")
}, true)
$p.addEventListener("click", function(){
    this.style.border = "5px solid green";
    alert("green")
}, true)
$body.addEventListener("click", function(){
    this.style.border = "5px solid yellow";
    alert("yellow")
}, true)

이때 "노란색", "녹색", "빨간색"이 순서대로 뜹니다.

행사장 캡처입니다.

addEventListener 메소드의 세 번째 매개변수를 false로 변경하면 버블링 단계에서만 트리거되고 팝업은 "빨간색", "녹색", "노란색"이 됩니다. .

기본 이벤트 방지

양식에 입력된 제출 유형을 클릭하면 점프 동작이 있는 a 태그와 같은 일부 html 요소 기본 동작이 있습니다. 기본 제출 점프 이벤트가 있습니다. 재설정 유형 입력에는 재설정 양식 동작이 있습니다.

이러한 브라우저 기본 동작을 방지하려는 경우 JavaScript가 제공하는 방법입니다.

코드부터 시작하겠습니다

var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
    alert("跳转动作被我阻止了")
    e.preventDefault();
    //return false;//也可以
}

<a href="http://www.nipic.com">昵图网</a>

기본 이벤트가 사라졌습니다.

return false와 e.preventDefault()는 동일한 효과를 가지는데 차이점이 있나요? 물론 있습니다.

HTML 이벤트 속성 및 DOM 레벨 0 이벤트 처리 메서드에서만 false 반환을 반환하여 이벤트 호스트의 기본 동작을 구성할 수 있습니다.

참고: 위의 내용은 W3C 표준을 기반으로 하며 IE의 다양한 구현을 고려하지 않았습니다.

위 내용은 JavaScript 이벤트 버블링, 이벤트 캡처 및 차단 기본 이벤트 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!