JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예)-JS 튜토리얼-php.cn

1. 이벤트 버블링

总结

집

웹 프론트엔드

JS 튜토리얼

JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예)

Nov 21, 2018 am 11:47 AM

javascript

이 글은 JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예제)을 제공합니다. 필요한 친구가 참고할 수 있기를 바랍니다.

이벤트

사용자와 웹페이지 간의 상호작용은 이벤트를 통해 실현됩니다. 이벤트는 처음에는 서버 부하를 공유하는 수단으로 사용되었습니다. 처음에는 Netscape와 IE가 통일된 사양이 없었습니다. 자체 API 사양이 있습니다.

이벤트 트리거 메커니즘과 관련하여 두 회사는 페이지의 트리거 메커니즘이 특정 요소를 클릭할 때 현재 대상 요소의 이벤트를 트리거하는 것만이 아니라고 믿습니다.

예: 페이지에 여러 개의 동심원이 있습니다. 가장 안쪽 원을 클릭하면 실제로는 이 원의 외부를 포함하는 원을 클릭하게 됩니다. 두 회사는 이 점에 동의하지만 이벤트 스트림의 전파 순서는 이벤트 버블링과 이벤트 캡처라는 두 가지 솔루션을 사용하여 구현됩니다.

1. 이벤트 버블링

IE 브라우저는 이전 버전부터 항상 이벤트 버블링 메커니즘을 지원해 왔습니다. 소위 이벤트 버블링은 이벤트 흐름이 보다 구체적인 것에서 시작된다는 것을 의미합니다. 요소는 지정되지 않은 요소로 수신되고 전파됩니다.

은 대상 요소에서 상위 요소로 전파됩니다.

    <div>
        <div></div>
    </div>
    <script>
    function childEventHandler(event) {
        console.log(this);
        console.log("child 被点击了");
    }
    function parentEventHandler(event) {
        console.log(this);
        console.log("parent 被点击了");
    }
    function bodyEventHandler(event) {
        console.log(this);
        console.log("body 被点击了");
    }
    function htmlEventHandler(event) {
        console.log(this);
        console.log("html 被点击了");
    }
    function documentEventHandler(event) {
        console.log(this);
        console.log("document 被点击了");
    }
    function windowEventHandler(event) {
        console.log(this);
        console.log("window 被点击了");
    }
    var bodyEl = document.getElementsByTagName("body")[0];
    var htmlEl = document.getElementsByTagName("html")[0];
    var win = window;
    var parentEl = document.getElementById("parent");
    var childEl = document.getElementById("child");
    childEl.onclick = childEventHandler;
    parentEl.onclick = parentEventHandler;
    bodyEl.onclick = bodyEventHandler;
    htmlEl.onclick = htmlEventHandler;
    document.onclick = documentEventHandler;
    win.onclick = windowEventHandler;
    </script>

로그인 후 복사

아래 그림과 같이 id가 child인 요소를 클릭하면 이벤트 흐름이 child에서 window 객체로 전파됩니다.

JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예)

# 🎜 🎜#모든 최신 브라우저는 이벤트 버블링을 지원합니다.

2. 이벤트 캡처

Netscape가 주도하는 이벤트 캡처는 이벤트 버블링의 반대입니다. 이벤트 스트림은 불특정 요소에서 시작되어 특정 요소로 전파됩니다. 요소에. 즉, 상위 요소에서 대상 요소로 전파됩니다.

JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예)

이벤트 캡처는 IE 9부터 지원되고, 구형 브라우저와 호환되지 않기 때문에 이를 사용하는 사람들이 더 많아졌습니다. 약간의.

3. 이벤트 흐름

DOM에서는 이벤트에 이벤트 캡처, 대상 단계, 이벤트 버블링의 세 단계가 포함된다고 규정합니다.

IE 9부터 시작하는 브라우저에서는 이벤트 흐름의 순서가 먼저 이벤트 캡처이고, 이벤트가 가로채고, 그 다음 대상 단계에 있고, 실제 대상이 이벤트를 받고, 마지막으로 이벤트가 발생한다고 규정합니다. 이 단계에서 이벤트에 응답합니다.

이전 하위 요소를 예로 들면, 하위 요소가 이벤트를 수신하기 전까지(창에서 상위로) 이벤트 캡처 단계입니다. 자식 요소에 도달하면 이때 이벤트가 처리되며, 버블링 단계에서도 이벤트가 처리될 수 있습니다. 이벤트를 처리할 수 있는 이벤트 버블링의 특성을 바탕으로 이와 관련된 이벤트 위임 메커니즘에 대해서는 뒤에서 다루도록 하겠다.

JavaScript의 이벤트 모델에 대한 자세한 설명(코드 예)

4. 이벤트 바인딩

HTML과 이벤트 사이에는 세 가지 형태의 바인딩이 있습니다. ：

1. 
<div></div>

2. 

var childEl = document.getElementById("child");
childEl.onclick = function() {
    console.log('hello');
}

3. 
var childEl = document.getElementById("child");
childEl.addEventListener('click', function() {
    console.log('hello');
}, false);

로그인 후 복사

JavaScript는 단일 스레드 언어입니다. 이벤트가 요소에 의해 트리거되면 이벤트 큐에서 이 이벤트에 바인딩된 함수가 있는지 확인합니다. 그렇다면 함수를 이벤트 큐 앞에 두고 메인 스레드 이벤트가 실행될 때까지 기다립니다.

위 코드의 첫 번째 바인딩은 이벤트를 html로 작성하며, 성능과 동작이 분리되지 않습니다. 이런 방식으로 코드를 작성하는 것은 권장되지 않습니다.

두 번째 유형의 바인딩은 이벤트를 요소 개체에 바인딩합니다. 이 작성 방법은 주로 이벤트를 덮어쓰기 쉽습니다.

세 번째 바인딩, 우선 세 번째 매개변수는 Boolean 값이고, 기본값은 false인데, 이벤트 버블링 단계에서 이벤트 핸들러가 호출된다는 뜻이고, true이면 그 뜻이다. 이벤트 캡처 단계 이벤트 핸들러 함수에서 호출됩니다.

이벤트를 처리하고 싶지만 요소의 이벤트 바인딩을 처리하고 싶지 않은 경우 메모리 누수가 발생하기 쉬운 경우 요소의 이벤트 바인딩을 빈 것으로 설정해야 합니다.

第一种写法：
childEl.onclick = null;


第三种写法：
function eventHandler() {
    console.log('hello');
}

childEl.addEventListener('click', eventHandler, false);

childEl.removeEventListener('click', eventHandler, false);

로그인 후 복사

5. 이벤트 위임(이벤트 프록시)

이벤트 위임은 이벤트 버블링의 특성을 사용하여 보다 구체적인 요소에서 시작하여 특정 요소로 계속 확산됩니다. .

우선, 목록 ul이 있는 경우 목록 요소를 클릭할 때마다 이벤트 핸들러가 실행됩니다. 분명히 이벤트를 요소에 하나씩 바인딩하면 효율성이 좋지 않습니다.

동시에 새로운 요소가 추가되면 이벤트가 성공적으로 바인딩되지 않을 수 있습니다. 살펴보겠습니다:

로그인 후 복사