이벤트는 비동기 프로그래밍의 구현 방법, 본질적으로 프로그램의 다양한 구성 요소 간의 통신이며 DOM은 많은 수의 이벤트를 지원합니다.
이 기사는이 점을 사용하여 이벤트 처리의 기본 원리를 자세히 분석합니다 : 이벤트 유형, 이벤트 대상, 이벤트 핸들러, 이벤트 객체, 이벤트 전파
마지막으로, 나는 당신에게 이벤트 개체를 소개하겠습니다.
1. 이벤트 유형 : '마우스 오버'와 같은 이벤트 유형을 나타내는 데 사용되는 전체 소문자 문자열입니다.
전통적인 이벤트 유형 : 양식 이벤트, 창 이벤트, 마우스 이벤트, 키보드 이벤트, DOM 이벤트, HTML5 이벤트, 터치 스크린 및 모바일 장치 이벤트 등
2. 이벤트 대상 : 이벤트를 트리거하는 객체
3. 이벤트 리스너 : 이벤트를 처리하거나 응답하는 함수. 객체가 이벤트를 트리거하면 브라우저는 객체에 등록 된 함수를 자동으로 호출합니다.
등록 이벤트 핸들러 (이벤트 듣기) :
1. <table id = "t"onclick = "modifyText ();">; 일부 이벤트 유형은 일반적으로 특정 문서 요소가 아닌 브라우저에서 직접 트리거됩니다. 이 이벤트 핸들러는 <body> 태그에 배치되지만 브라우저는 <body onload = "Alert ( 'Hello World!')" "와 같은 창 객체에 등록합니다.이 이벤트는 다음과 같습니다.
OnaFterPrint OnFocus OnOnline OnResize OnbeforePrint OnhashChange
Onpagehide OnStorage OnPageshow OnUndo를로드합니다
Onblur OnMessage OnPopState OnErload OneError Onoffline OnRedo
HTML 속성으로서의 이벤트 값은 JS 코드 문자열이며, 이는 처리 함수의 본문이며 {}를 포함하지 않습니다. 참고 : 다른 HTML 태그에 이벤트를 등록하지 마십시오. HTML 및 JavaScript 코드의 분리 원리를 위반합니다. 이벤트 함수가로드되기 전에 이벤트 객체 요소를 클릭하면 오류가 발생합니다.
2. DOM 요소의 속성으로 등록하십시오 (버블 단계에서만 트리거됩니다). 현재 이벤트 핸들러 속성의 이름은 'ON'과 접두사를해야합니다. 이 방법은 모든 브라우저와 호환됩니다. 유일한 단점은 하나의 이벤트 핸들러 기능 만 등록 할 수 있다는 것입니다. onclick 속성이 두 번 정의되면 후자의 정의는 이전의 정의를 덮어 씁니다. 예 : Window.onload = function () {...};
3. IE8 및 이전 버전을 제외한 모든 브라우저에서 DOM의 이벤트 작업 (청취 및 트리거)은 EventTarget 인터페이스에 정의됩니다. 이 인터페이스는 요소 노드, 문서 노드 및 창 객체에 배포됩니다. 또한 XMLHTTPREQUEST, AUDIONODE, AUDIOCONTEXT 등과 같은 브라우저의 내장 객체 도이 인터페이스를 배포했습니다. 이 인터페이스에는 세 가지 방법이 있습니다. AddeventListener 및 RemoveEventListener는 리스너 기능을 바인딩하고 제거하는 데 사용되며 DispatchEvent는 이벤트를 트리거하는 데 사용됩니다.
addeventListener (유형, 리스너, 부울) 메소드는 리스너를 등록하는 데 사용됩니다. 세 번째 매개 변수는 이벤트 전파 방법을 설정합니다. 일반적으로 기본값 False가 사용됩니다. 즉, 청취 함수는 기포 단계 (Pupple)에서만 트리거됩니다. true로 설정하면 캡처 스테이지 (캡처)에서 청취 함수가 트리거됨을 의미합니다. 모든 청취자는 동일한 객체에서 동일한 유형 이벤트에 등록 될 수 있으며 모든 청취자는 등록 주문으로 트리거됩니다 (중복 리스너 등록은 브라우저에서 무시됩니다).
매개 변수를 청취 함수로 전달하려면 청취 함수를 Elm.AdDeventListener ( 'click', function () {listen ( 'real argument'), false)와 같은 익명 함수로 랩핑 할 수 있습니다.
등록 된 리스너가 함수에 대한 참조 변수 인 경우 removeEventLestener (유형, 리스너, 부울)를 사용하여 이벤트 대상에서 리스너를 삭제할 수 있습니다. 동일한 청취 이벤트의 버블 이벤트 및 캡처 이벤트는 별도로 삭제되어야하며, 두 사람은 서로를 방해하지 않습니다.
var div = document.getElementById ( 'div'); var learger = function (event) { / * 여기에서 뭔가를하십시오 * /}; div.addeventListener ( 'Click', Listener, False); Div.removeEventListener ( 'Click', Listener, False);DispatchEvent (이벤트) 메소드는 현재 노드에서 지정된 이벤트를 수동으로 트리거하여 청취 기능의 실행을 트리거합니다. 이 메소드는 부울 값을 반환합니다. 청취 함수가 event.preventDefault ()를 호출하는 한 false를 반환합니다. 그렇지 않으면 사실입니다. 매개 변수는 이벤트 객체의 인스턴스입니다. 매개 변수는 비어있을 수 없으며 유효한 이벤트 개체 여야합니다. 그렇지 않으면 오류 가보고됩니다.
btn.addeventListener ( '클릭', 리스너, 거짓);
var e = 새로운 이벤트 ( '클릭');
btn.dispatchevent (e); // 클릭 이벤트가 BTN에서 즉시 트리거되고 리스너가 즉시 호출됩니다.
다음 예제는 DispatchEvent 메소드의 반환 값에 따라 이벤트가 취소되었는지 여부를 결정합니다.
var canceled =! btn.dispatchevent (이벤트);
if (canceled) {console.log ( '이벤트 취소'); }
else {console.log ( '이벤트 취소되지 않음'); }}
4. IE8 및 이전 버전은 AttachEvent (유형, 리스너) 및 DetacheVent (유형, 리스너) 만 지원합니다. 그들의 사용법과 addeventlistener는 다음과 같습니다. 두 가지 매개 변수 만 있습니다. 비. 매개 변수 유형은 'on'으로 접두사를해야합니다. 기음. 동일한 청취 이벤트를 반복적으로 등록 할 수 있으며 호출됩니다. 디. AttachEvent 메소드를 사용하는 데 불리한 점이 있습니다. 즉,이 값은 이벤트를 트리거하는 요소 대신 창 객체가 될 것입니다.
전화 주문 문제 : 1). 객체 속성 또는 HTML 속성을 설정하여 등록 된 핸들러는 항상 먼저 호출됩니다.
2). addeventListener에 등록 된 핸들러는 등록 명령으로 호출됩니다.
3). 레거시 IE에 autdevent에 등록 된 핸들러는 어떤 순서로든 호출 될 수 있습니다.
반환 가치 문제 :
1). 이벤트 핸들러의 반환 값은 속성을 통해 등록 된 핸들러에게만 의미가 있습니다. 객체 속성 또는 HTML 속성을 False로 설정하여 이벤트 핸들러의 반환 값을 등록하는 것은 브라우저 에이 이벤트와 관련된 기본 작업을 수행하지 말라고 지시하는 것입니다. 브라우저가 새 페이지로 이동하려면 창 객체의 onbeforeunload 이벤트가 트리거됩니다. 리턴 값이 문자열 인 경우 쿼리 확인 대화 상자에 나타납니다.
2) .addeventListener () 또는 att 브라우저의 기본 작업을 취소하려면 extentDefault () 메소드를 호출하거나 이벤트 객체의 returnValue 속성을 설정해야합니다.
이것은 문제를 가리 킵니다.
1). addeventListener 메소드에 의해 지정된 청취 함수, 내부이 객체는 항상 이벤트를 트리거하는 노드를 가리킨다.
2). IE8 및 이전 첨부 파일 이벤트 메소드에 의해 등록 된이 이벤트 처리기 기능 의이 이벤트 핸들러 기능은 글로벌 오브젝트를 가리 킵니다.
다음 방식으로 작성된이 모든 객체는 요소 노드를 가리 킵니다.
요소를 클릭 = 인쇄;
element.addeventListener ( 'Click', print, false)
요소.onclick = function () {console.log (this.id);}
<요소 onclick = "console.log (this.id)">
이 객체는 다음과 같은 방식으로 글로벌 객체를 가리 킵니다.
요소.onclick = function () {dosomething ()};
요소 .setAttribute ( 'onclick', 'dosomething ()');
<요소 onclick = "dosomething ()">
요소 .attachevent ( 'onclick', dosomething) // ie8
메모리 문제 : 다음 코드의 경우 각 루프에서 새로운 익명 함수가 생성되며 메모리는 점점 더 소비됩니다. 익명 함수에 대한 참조로 유지되지 않으므로 removeEventListener라고 할 수 없습니다. 따라서 두 번째 매개 변수 리스너는 처리 이벤트 기능에 대한 참조로 유지되어야합니다.
for (i = 0; i <els.length; i ++) {els [i] .addeventListener ( "click", function (e) {/*무언가*/}, false}); }구형 IE와 호환되는 범용 도구 기능 :
이 이벤트 핸들러 의이 도구 기능이 이벤트의 대상 객체를 가리키는지 확인하십시오.
function addevent (target, type, func) {if (target.addeventListener) {target.addeventListener (type, func, false); } else {target.attachevent ( 'on'+type, function (e) {// attachevent에 의해 등록 된 처리 함수는 참조에 바인딩되지 않으므로 DetacheVent를 사용하여 반환 func.call (target, e);})를 삭제하는 것은 불가능합니다. }}일반 이벤트 핸들러 (IE8 및 이전 버전으로 인해 이벤트 대상으로서의 온전한 핸들러는 이벤트 객체를 얻기 위해 Window를 필요로하는 이벤트 대상 및 이벤트를 트리거하는 대상 노드 객체는 이벤트를 통해 얻습니다.
함수 func (event) {var event = event || window.event; var target = event.target || event.srcelement; //........ 핸들러 코드}4. 이벤트 전파 : 브라우저가 이벤트 핸들러를 트리거하는 객체를 결정하는 프로세스입니다.
"DOM2 레벨 이벤트"에 지정된 이벤트 흐름에는 3 단계가 포함됩니다. 이벤트 캡처 스테이지 ==> 대상 단계 ==> 이벤트 버블 스테이지. 가장 먼저 발생하는 일은 이벤트 캡처 단계 (외부 층에서 내부 층으로 전파되는)이며, 이벤트가 이벤트가 이벤트를 가로 지르는 모든 노드에 대한 기회를 제공합니다. 그런 다음 실제 대상 리셉션 이벤트가 있습니다 (등록 순서로 실행). 마지막 단계는 버블 링 단계 (내부 층에서 외부 층으로의 버블 링)입니다.
컨테이너 요소 및 중첩 요소, 즉 캡처 스테이지와 버블 스테이지에서 이벤트 처리기가 호출되는 경우 : 이벤트는 DOM 이벤트 스트림 순서대로 이벤트 핸들러를 실행하고 이벤트가 대상 단계에있을 때 이벤트 호출 순서는 바인딩 이벤트의 쓰기 순서에 의해 결정됩니다.
이벤트가 특정 노드에 도달하고 더 이상 전파되지 않으려면 두 가지 방법이 있습니다.
1. 이벤트 객체의 event.stopPropagation () 메소드를 사용하여 현재 청취 함수의 전파를 방지합니다.
2. 이벤트 객체에서 현재 이벤트의 모든 청취 기능의 전파를 방지하기 위해 이벤트 객체의 event.StopimMediatePropagation () 메소드를 사용하십시오.
이벤트 위임 : 이벤트는 기포 단계에서 상위 노드로 위쪽으로 전파되므로, 하위 노드의 청취 기능은 부모 노드에서 정의 될 수 있으며, 부모 노드의 청취 기능은 여러 자식 요소의 이벤트를 균일하게 처리 할 수 있습니다.
5. 이벤트 객체 (이벤트) : 이벤트가 발생한 후 이벤트 객체가 생성되어 청취 함수의 매개 변수로 전달됩니다. 브라우저는 기본적으로 이벤트 객체를 제공하며 모든 이벤트는이 객체의 인스턴스이거나 이벤트를 상속합니다. 이벤트 객체 자체는 새로운 인스턴스를 생성하는 데 사용할 수있는 생성자입니다.
var ev = new event ( "룩", { "버블": true, "취소 가능": false});
document.dispatchevent (EV);
이벤트 생성자는 두 매개 변수를 수락합니다. 첫 번째 매개 변수는 이벤트의 이름을 나타내는 문자열입니다. 두 번째 매개 변수는 객체이며 이벤트 객체의 구성을 나타냅니다. 이 매개 변수에는 다음 두 가지 속성이있을 수 있습니다.
버블 : 부울 값, 선택 사항, 기본값은 거짓이며 이벤트 객체가 버블 링되었는지를 나타냅니다.
취소 가능 : 부울 값, 선택 사항, 기본값은 거짓이며 이벤트가 취소 될 수 있는지 여부를 나타냅니다.
이벤트 객체의 속성 :
1. 이벤트 단계와 관련 :
버블 : 읽기 전용 속성은 부울 값을 반환하여 현재 이벤트가 거품이 될지 여부를 나타냅니다. 이벤트가 거품이 될지 여부에 따라 다른 기능을 호출 할 수 있습니다.
Event -Phase : 정수 값 (0,1,2,3 중 하나)을 반환하여 이벤트의 현재 상태를 나타냅니다.
<0, 이벤트는 아직 발생하지 않았습니다.
<1, 이벤트는 현재 캡처 스테이지에 있으며, 즉 조상 노드에서 대상 노드로의 전파 과정에 있습니다. 프로세스는 창 객체에서 문서 노드, 대상 노드의 상위 노드까지 htmlhtmlelement 노드로 이루어집니다.
<2, 이벤트는 대상 노드에 도달합니다. 즉, 대상 속성에 의해 가리키는 노드.
<3, 이벤트는 버블 스테이지, 즉 대상 노드에서 조상 노드로의 후면 전파 프로세스에 있습니다. 이 프로세스는 상위 노드에서 윈도우 객체까지입니다. 이 단계는 거품 속성이 참인 경우에만 발생할 수 있습니다.
2. 이벤트의 기본 동작과 관련하여 :
취소 가능 : 이벤트를 취소 할 수 있는지 여부를 나타내는 부울 값을 반환합니다. 이벤트를 취소하려면이 이벤트에서 예방 대표 방법을 호출해야합니다.
DefaultPrevented : PretentDefault 메소드가 호출되었는지 여부를 나타내는 부울 값을 반환합니다.
3. 이벤트의 대상 노드와 관련하여 :
currentTarget : 이벤트 실행의 청취 함수에 결합 된 노드를 반환합니다.
대상 : 이벤트를 트리거 한 노드를 반환합니다. IE6-IE8 에서이 속성의 이름은 대상이 아니라 srcelement입니다.
4. 이벤트 개체에 대한 다른 정보와 관련하여 :
유형 : 이벤트 유형을 나타내는 문자열을 반환합니다
세부 사항 : 이벤트에 대한 정보를 나타내는 숫자 값을 반환합니다. 구체적인 의미는 이벤트 유형과 관련이 있습니다. 마우스 이벤트의 경우 마우스 버튼이 특정 위치에서 누르는 횟수를 의미합니다. 예를 들어, DBLClick 이벤트의 경우 세부 사항 속성의 값은 항상 2입니다.
타임 스탬프 : 이벤트가 발생한 시간을 나타내는 밀리 초 타임 스탬프를 반환합니다. 계산은 performancetiming.navigationStart에서 시작하므로 사용자가 웹 페이지로 이동하는 데 걸리는 시간을 의미합니다. 이 값을 UNIX Epoch 타임 스탬프로 변환하려면 이벤트를 계산해야합니다.
ISTRUSTED : 이벤트가 신뢰할 수 있는지 여부를 나타내는 부울 값을 반환합니다. 그다지 유용하지 않으며 다른 브라우저 지원이 다릅니다.
이벤트 객체의 방법 :
PretentDefault () : 현재 이벤트에 대한 브라우저의 기본 동작을 취소합니다. 이 방법이 적용되는 전제는 이벤트의 취소 가능한 속성이 사실이라는 것입니다. False 인 경우이 메소드를 호출하는 데 영향을 미치지 않습니다.
stopPropagation () : 전파 프로세스의 캡처, 표적 처리 또는 버블 스테이지 동안 더 전파되도록 이벤트가 끝납니다. 이 메소드를 호출 한 후 이벤트를 처리하는 노드의 핸들러가 호출되고 이벤트는 더 이상 다른 노드로 발송되지 않습니다. 참고 :이 메소드는 동일한 문서 노드의 다른 이벤트 처리가 호출되는 것을 막을 수는 없지만 이벤트가 다른 노드로 발송되는 것을 방지 할 수 있습니다.
stopimmediatepropagation () : 같은 이벤트에서 다른 청취 함수가 호출되는 것을 방지합니다. 청취 함수 중 하나가 메소드를 호출하는 한 다른 청취 기능은 다시 실행되지 않습니다.
참조 링크 :
http://javaScript.ruanyifeng.com/dom/event.html#toc31
https://developer.mozilla.org/zh-cn/docs/web/api
권위있는 JavaScript 가이드 6 판
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.