js의 이벤트 모델 분석

不言원래의: 2018-07-14 14:49:311266검색

이 기사에서는 특정 참조 가치가 있는 JavaScript의 이벤트 모델을 주로 소개합니다. 이제 도움이 필요한 친구들이 참조할 수 있습니다.

이벤트는 브라우저와 문서입니다. 버튼 클릭, 양식 작성 등과 같은 상호 작용의 순간은 Javascript와 HTML 간의 통신을 위한 다리입니다. DOM은 트리 구조입니다. 이벤트가 동시에 두 상위 노드에 바인딩되면 하위 노드가 트리거될 때 이러한 두 이벤트가 발생하는 순서는 이벤트 스트림의 내용과 관련됩니다. 페이지가 허용됩니다. 이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명하지만 더 흥미로운 점은 IE와 Netscape 개발팀이 실제로 거의 완전히 반대되는 개념을 제안했다는 것입니다. IE의 이벤트 흐름은 이벤트 버블링 흐름인 반면 Netscape Communicator의 이벤트 흐름은 이벤트 캡처 흐름입니다.

따라서 이벤트 흐름은 크게 이벤트 버블링과 이벤트 캡처의 두 가지 유형으로 나뉩니다.

IE의 이벤트 흐름을 이벤트 버블링이라고 합니다. 문서), 그런 다음 덜 구체적인 노드(문서) 단계로 위쪽으로 전파됩니다. 단계별로. Netscape 팀이 제안한 또 다른 이벤트 스트림은 이벤트 캡처라고 합니다. 이벤트 캡처의 아이디어는 덜 구체적인 노드가 이벤트를 더 일찍 수신하고 가장 구체적인 노드가 이벤트를 마지막에 수신해야 한다는 것입니다. 캡처의 목적은 이벤트가 의도한 목적지에 도달하기 전에 이벤트를 캡처하는 것입니다.

DOM2 수준 이벤트에서 지정하는 이벤트 흐름에는 이벤트 캡처 단계, 대상 단계, 이벤트 버블링 단계의 세 단계가 포함됩니다. 가장 먼저 일어나는 일은 이벤트를 가로챌 수 있는 기회를 제공하는 이벤트 캡처입니다. 그런 다음 실제 대상이 이벤트를 수신합니다. 마지막 단계는 이벤트에 응답할 수 있는 버블링 단계입니다.

1. DOM0 수준 이벤트 모델

DOM 0 수준 이벤트 모델은 원래 이벤트 모델이라고도 알려진 초기 이벤트 모델입니다. 이벤트 흐름. 이벤트 바인딩 청취 기능은 비교적 간단합니다. Javascript를 사용하여 이벤트 핸들러를 지정하려면 먼저 작동할 객체에 대한 참조를 얻어야 합니다. W 각 요소(Window 및 Document 포함)에는 자체 이벤트 처리 속성이 있습니다. 이러한 속성은 일반적으로 onClick과 같이 소문자입니다. 이 속성을 함수로 설정하여 이벤트 핸들러를 지정할 수 있습니다:

 btn = document.getElementById("myBtn"= "Clicked!"

//HTML事件处理程序<form method="post">
    <input type="text" name="username" value="">
    <input type="button" value="Username" onclick = "alert(username.value)">
</form>

2. DOM2 수준 이벤트 모델

이 모델에서는 세 가지 프로세스로 나뉩니다. 캡처 단계, 대상 단계 7 이벤트 버블링 단계

이벤트 캡처 단계(캡처 단계). 이벤트는 문서에서 대상 요소까지 전파되며 전달 노드가 이벤트 수신 함수에 바인딩되어 있는지 확인하고 바인딩된 경우 실행합니다.

이벤트 처리 단계(대상 단계). 이벤트가 대상 요소에 도달하면 대상 요소의 청취 기능이 트리거됩니다.
이벤트 버블링 단계. 이벤트는 대상 요소에서 문서로 버블링되고 전달 노드가 이벤트 수신 함수에 바인딩되어 있는지 확인하고 바인딩된 경우 실행합니다.
DOM2 레벨은 이벤트 핸들러를 지정하고 제거하는 작업을 처리하기 위한 두 가지 메서드인 addEventListener() 및 RemoveEventListener()를 정의합니다. 모든 DOM 노드에는 이 두 가지 메서드가 포함되어 있으며 세 가지 매개 변수, 처리할 이벤트 이름, 이벤트 핸들러 기능 및 부울 값을 사용합니다. 클릭 이벤트에 이벤트 핸들러를 추가하려면 다음을 사용하면 됩니다.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", functioin() {
    alert(this.id);
}, false);
btn.addEventListener("click", function() {
    alert("Hello Kid");
}, false);

이때 실행 순서는 순차적 실행입니다: "myBtn" "Hello kid". IE에서는 실행 순서가 정반대입니다.函 이벤트 모니터링 기능을 제거하는 방법은 다음과 같습니다.

RrreerReee

여기서는 매개변수를 제거하고 추가할 때 매개변수를 도입해야 하기 때문에 함수 표현식 형태의 이벤트 처리 프로그램으로만 사용할 수 있습니다. 제거 시 응용 프로그램에 사용되는 매개변수는 동일합니다. 익명 함수를 통해 추가된 이벤트 수신 함수는 제거할 수 없습니다.

3. IE의 이벤트 모델

IE는 DOM과 유사한 두 가지 메서드인 attachmentEvent() 및 detachEvent()를 사용합니다. 두 메서드 모두 동일한 두 매개 변수인 이벤트 핸들러 이름과 이벤트 핸들러 함수를 허용합니다. IE8 이하 버전에서는 이벤트 버블링만 지원하므로,attachEvent()를 통해 추가된 이벤트 핸들러는 버블링 단계에 추가됩니다. AttachEvent()를 사용하여 버튼에 이벤트 핸들러를 추가하는 경우 다음을 사용할 수 있습니다.

var btn = document.getElementById("myBtn");var handler = function() {
    alert(this.id);
};

4. 이벤트 객체

DOM의 이벤트 객체

type은 이벤트 유형을 나타냅니다. Triggered

target 이벤트의 대상을 나타냅니다

currentTarget은 이벤트 핸들러가 현재 이벤트를 처리하고 있는 요소를 나타냅니다
cancelable (Boolean) 表明是否可以取消事件的默认行为
bubbles （Boolean）表明事件是否冒泡
perventDefault()取消事件的默认行为。如果cancelable为true，则可以使用这个方法
stopPropagation()取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法。

IE中的事件对象

type表示被触发的事件类型
srcElement表示事件的目标
cancelBubble （Boolean）默认是false，将其设为true就可以取消事件冒泡
returnValue (Boolean) 默认是true，将其设置为false就可以取消事件的默认行为

有了上面的事件对象，就可以写出跨浏览器的事件对象封装成事件包裹了。

var EventUtil = {
    addHandler: function(element, type, handler){        
    if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },

    removeHandler: function(element, type, handler){        
    if (element.removeEventListener){                 //DOM2
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){                  //IE
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;                  //DOM0        }
    },

    getEvent: function(event){        
    return event ? event : window.event;
    },

    getTarget: function(event){        
    return event.target || event.srcElement;
    },

    preventDefault: function(event){        
    if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function(event){        
    if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }};

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

js의 이벤트 모델 분석

관련 기사