DOM
이벤트
수색…
매개 변수
| 매개 변수 | 기술 |
|---|---|
| 유형 | String 은 청취 할 이벤트의 이름을 정의합니다. |
| 경청자 | 이벤트가 발생할 때 Function 트리거됩니다. |
| 옵션들 | 캡처를 설정할 Boolean Object 대해 다음 속성을 설정할 수 있으면 객체 옵션이 약하게 지원됩니다. |
| 1. 캡처 | 이 유형의 이벤트가 등록 된 리스너에 전달되기 전에 DOM 트리의 해당 EventTarget에 전달되도록 지정하는 부울입니다. |
| 2. 한 번 | 리스너가 추가 된 후 최대 한 번 호출되어야 함을 나타내는 부울입니다. 참이면 리스너는 호출 될 때 자동으로 제거됩니다. |
| 3. 수동적 | 리스너가 preventDefault ()를 호출하지 않는다는 것을 나타내는 부울입니다. 그렇다면 사용자 에이전트는이를 무시하고 콘솔 경고를 생성해야합니다. |
비고
사건의 기원
이벤트는 이벤트를 트리거하는 것으로 시작하지 않습니다 (예 : 버튼).
대신
경로의 모든 요소에 닿아 이벤트가 발생하고 있음을 모든 요소에 알립니다. 이벤트는 목적지에 도달 한 후에 다시 돌아와 요소에 다시 발생 사실을 알립니다.
캡처 및 버블 링
우리가 배운 것처럼 이벤트는 DOM 트리의 맨 위에서 시작하여 경로의 모든 노드에 목적지까지 알려준 다음 대상에 도달하면 다시 돌아가고 발생하는 모든 요소에 대해 알려줍니다.
DOM 트리를 따라 내려가는 이벤트는 캡처 단계에 있고, DOM 트리를 올라가는 이벤트는 버블 링 단계에 있습니다.
기본적으로 이벤트는 버블 링 단계에서 들립니다. 이 값을 변경하려면 addEventListener 함수에서 세 번째 매개 변수를 지정하여 이벤트가 수신되는 단계를 지정할 수 있습니다. ( 캡처 섹션의 코드 예제)
소개
정의:
컴퓨팅에서 이벤트는 소프트웨어가 인식 할 수있는 작업 또는 발생으로 소프트웨어에서 처리 할 수 있습니다. 컴퓨터 이벤트는 시스템에 의해, 사용자에 의해 또는 다른 방식으로 생성 또는 트리거 될 수 있습니다. 정의 출처
HTML 이벤트는 HTML 요소에 발생하는 "사물"입니다. JavaScript는 이러한 이벤트에 "반응"할 수 있습니다. Event Listeners 를 통해. 또한 사용자 정의 이벤트는 dispatchEvent 사용하여 트리거 될 수 있습니다. 그러나 이것은 단지 소개 일 뿐이므로 시작할 수 있습니다!
기본 이벤트 리스너
이벤트를 수신하려면target.addEventListener(type, listener); 를 호출합니다 target.addEventListener(type, listener); function loadImage() {
console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);
이 my-button 을 클릭 할 때마다 loadImage가 트리거됩니다.
이벤트 리스너는 DOM 트리의 모든 노드에 연결할 수 있습니다. 브라우저에서 기본적으로 트리거 된 모든 이벤트의 전체 목록을 보려면 여기를 클릭 하십시오. 전체 이벤트 목록을 보려면 MDN 링크를 클릭하십시오.
이벤트 리스너 제거
removeEventListener () 메서드는 addEventListener () 메서드로 첨부 된 이벤트 핸들러를 제거합니다.
element.removeEventListener("mousemove", myFunction);
removeEventListener 모든 항목 (이벤트 이름, 함수 및 옵션)은 이벤트 리스너를 요소에 추가 할 때 설정된 항목과 일치해야합니다.
. remove removeener를 사용하여 바인딩
이벤트 리스너를 추가 할 때 함수에서 .bind 를 사용하면 함수를 제거 할 수 없으므로 실제로 작성할 수있는 eventListener를 제거 할 수 있습니다.
function onEvent() {
console.log(this.name);
}
var bindingOnEvent = onEvent.bind(this);
document.addEventListener('click', bindingOnEvent);
...
document.removeEventListener('click', bindingOnEvent);
한 번만 이벤트를 듣다.
once 옵션이 광범위하게 지원 될 때까지 이벤트가 처음 실행되면 수동으로 리스너를 제거해야합니다. 이 작은 조력자는 우리가 이것을 성취하는 데 도움이 될 것입니다 :
Object.prototype.listenOnce = Object.prototype.listenOnce ||
function listenOnce(eventName, eventHandler, options) {
var target = this;
target.addEventListener(eventName, function(e) {
eventHandler(e);
target.removeEventListener(eventName, eventHandler, options);
}, options);
}
var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);
* Object 프로토 타입에 함수를 연결하는 것은 좋지 않으므로이 코드의 첫 번째 행을 제거하고 첫 번째 매개 변수로 대상을 추가 할 수 있습니다.
문서가로드되기를 기다리는 중
가장 일반적으로 사용되는 이벤트 중 하나는 스크립트 파일과 이미지를 포함하여 문서가로드되기를 기다리는 것입니다. document 의 load 이벤트가이 작업에 사용됩니다.
document.addEventListener('load', function() {
console.log("Everything has now loaded!");
});
때로는 DOM 객체가로드되기 전에 DOM 객체에 액세스하려고 시도하여 null 포인터가 발생합니다. 이들은 디버깅하기가 정말 어렵습니다. 이를 피하기 위해 document 의 DOMContentLoaded 이벤트를 대신 사용하십시오. DOMContentLoaded 는 다른 외부 리소스를 기다리지 않고 HTML 내용이로드되고 초기화되도록합니다.
document.addEventListener('DOMContentLoaded', function() {
console.log("The document contents are now available!");
});
이벤트 객체
이벤트 객체에 액세스하려면 이벤트 리스너 콜백 함수에 event 매개 변수를 포함시킵니다.
var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);
function onClick(event) {
// the `event` parameter is the event object
// e.g. `event.type` would be "click" in this case
};
e.stopPropagation ();
HTML :<div id="parent">
<div id="child"></div>
</div>
자바 스크립트 :
var parent = document.querySelector('#parent');
var child = document.querySelector('#child');
child.addEventListener('click', function(e) {
e.stopPropagation();
alert('child clicked!');
});
parent.addEventListener('click', function(e) {
alert('parent clicked!');
});
자식은 이벤트 전파를 중지하고 버블 링 단계에서 이벤트를 수신하므로 자식을 클릭하면 자식 만 트리거됩니다. 전달을 중지하지 않고 두 이벤트가 모두 트리거됩니다.
e.preventDefault ();
event.preventDefault() 메서드는 요소의 기본 동작을 중지합니다.
예 :
- 제출 단추가 양식을 제출하지 못하도록 방지
- 링크가 URL을 따르지 않도록 방지
var allAnchorTags = document.querySelector('a');
allAnchorTags.addEventListener('click', function(e){
e.preventDefault();
console.log('anchor tags are useless now! *evil laugh*');
});
e.target 대 e.currentTarget
e.currentTarget 이벤트가 DOM을 통과 할 때 이벤트의 현재 대상을 식별합니다. 이벤트가 발생한 요소를 식별하는 event.target과 대조적으로 이벤트 처리기가 연결된 요소를 항상 참조합니다.
다른 말로
e.target 은 이벤트 디스패처를 트리거 할 트리거를 반환합니다.
e.currentTarget 은 청취자에게 할당 한 것을 반환합니다.
HTML :
<body>
<button id="my-button"></button>
</body>
자바 스크립트 :
var body = document.body;
body.addEventListener( 'click', function(e) {
console.log('e.target', e.target);
console.log('e.currentTarget', e.currentTarget);
});
my-button 하면
- e.target 은
my-button이 될 것입니다. - e.currentTarget 은
body
이벤트 버블 링 및 캡처
DOM 요소에서 발생한 이벤트는 대상 요소에만 영향을 미치지 않습니다. DOM에있는 대상의 조상 중 누구라도 이벤트에 반응 할 수 있습니다. 다음 문서를 고려하십시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p id="paragraph">
<span id="text">Hello World</span>
</p>
</body>
</html>
옵션없이 각 요소에 리스너를 추가하면 범위에 대한 클릭이 트리거됩니다.
document.body.addEventListener('click', function(event) {
console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
console.log("Text clicked!");
});
window.text.click();
... 그러면 이벤트가 각 조상을 통해 거품 을 내며 진행되는 동안 각 클릭 핸들러를 트리거합니다.
Text clicked!
Paragraph clicked!
Body clicked!
핸들러 중 하나가 더 이상 핸들러를 트리거하지 못하게하려면, event.stopPropagation() 메소드를 호출 할 수 있습니다. 예를 들어 두 번째 이벤트 핸들러를 다음과 같이 바꾸면 :
window.paragraph.addEventListener('click', function(event) {
console.log("Paragraph clicked, and that's it!");
event.stopPropagation();
});
body 의 click 핸들러가 트리거되지 않은 채로 다음 출력이 표시됩니다.
Text clicked!
Paragraph clicked, and that's it!
마지막으로 버블 링 대신 " 캡처 "중에 트리거되는 이벤트 리스너를 추가 할 수있는 옵션이 있습니다. 이벤트가 조상을 통해 요소에서 시작하기 전에 먼저 조상을 통해 요소로 "캡처"됩니다. 캡처 리스너는 addEventListener 의 선택적 세 번째 인수로 true 또는 {capture: true} 를 지정하여 추가됩니다. 위의 첫 번째 예제에 다음 리스너를 추가하면 :
document.body.addEventListener('click', function(event) {
console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
console.log("Text click captured!");
}, true);
우리는 다음 결과를 얻을 것이다 :
Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!
기본적으로 이벤트는 버블 링 단계에서 들립니다. 이 값을 변경하려면 addEventListener 함수에서 세 번째 매개 변수를 지정하여 이벤트가 수신되는 단계를 지정할 수 있습니다. (캡처 및 버블 링에 대해 알아 보려면 비고란에 표시하십시오 )
element.addEventListener(eventName, eventHandler, useCapture)
useCapture : true 는 DOM 트리를 사용할 때 이벤트를 수신하는 것을 의미합니다. false 는 DOM 트리를 올라가는 동안 이벤트를 수신하는 것을 의미합니다.
window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);
경고 상자가 다음 순서로 나타납니다.
- 2 : 캡처 중
- 1 : 거품에
실제 사용 사례
캡처 이벤트는 버블 이벤트 전에 디스패치되므로 캡처 단계에서 이벤트를 청취하면 이벤트가 먼저 들리는 것을 보장 할 수 있습니다.
부모 요소에서 click 이벤트를 청취하고 자식에서 click 이벤트를 수신하는 경우 useCapture 매개 변수를 변경하는 방법에 따라 먼저 자식 또는 부모를 먼저 청취 할 수 있습니다.
버블 링에서 하위 이벤트는 캡처에서 먼저 호출되고 부모는 먼저 호출됩니다.
HTML :
<div id="parent">
<div id="child"></div>
</div>
자바 스크립트 :
child.addEventListener('click', function(e) {
alert('child clicked!');
});
parent.addEventListener('click', function(e) {
alert('parent clicked!');
}, true);
부모 eventListener를 true로 설정하면 부모 수신기가 먼저 트리거됩니다.
e.stopPropagation ()과 결합하면 이벤트가 하위 이벤트 수신기 또는 부모를 트리거하지 못하게 할 수 있습니다. (다음 예제에서 자세히 설명)
이벤트 위임
이벤트 위임은 특정 노드에 이벤트 리스너를 추가하지 않아도되는 프로세스입니다. 대신 이벤트 리스너가 상위 노드에 추가됩니다. 이 메커니즘은 이벤트 전파 / 버블 링을 사용하여 이벤트가 발생한 요소를 사용하는 대신 DOM의 상위 요소 / 노드에서 이벤트를 처리합니다. 예를 들어 다음 목록 요소에 대한 이벤트를 추가해야한다고 생각합니다.
<ul id="container">
<li id="item-1" class="new">Item 1</li>
<li id="item-2">Item 2</li>
<li id="item-3">Item 3</li>
</ul>
click 핸들러를 추가해야하며 기본적으로 루프를 사용하여 각 요소에 리스너를 추가 할 수 있지만 요소를 동적으로 추가하려고한다고 가정합니다. 따라서 DOM이로드되고 DOM이 초기화되고 각 요소에 대한 모든 이벤트 핸들러를 등록한 후 위의 UL 새로 삽입 된 요소는 해당 요소가 DOM에 없으므로 클릭시 응답하지 않습니다. 우리가 클릭 이벤트 리스너를 등록했을 때.
따라서이 문제를 극복하기 위해 이벤트 위임을 활용할 수 있습니다. 즉, 각 li 요소 자체에 리스너를 등록하는 대신 이벤트 리스너를 부모 UL 요소에 바인딩 할 수 있습니다. 예를 들면 다음과 같습니다.
document.getElementById("container").addEventListener("click", function(e) {
console.log("List item " e.target.id, " was clicked!");
});
이벤트는 기본적으로 전파되므로 (거품이 위로 향함) LI 요소를 클릭하면 UL 요소가 동일한 이벤트를 발생시킵니다. 이 경우 함수에서 e 매개 변수를 사용할 수 있습니다.이 매개 변수는 실제로 이벤트 객체이며 이벤트를 시작한 원래 요소를 포함하여 이벤트에 대한 유용한 정보를 전달합니다. 예를 들어 다음과 같이 사용할 수 있습니다.
document.getElementById("container").addEventListener("click", function(e) {
// If UL itself then no action is require
if(e.target.nodeName == 'UL') return false;
if(e.target.classList.contains('new')) {
console.log("List item " e.target.id, " was clicked and it's new!");
}
});
따라서 e (Event Object)를 사용하면 소스 요소 (e.target)를 검사 할 수 있으며 DOM을로드 한 후 새 요소를 UL 쉽게 주입 할 수 있으며 위임 된 이벤트 핸들러 만 모든 클릭 이벤트를 처리합니다. 모든 요소에 대해 하나의 함수 만 선언했기 때문에 부모 UL 내에서 메모리 소비가 적습니다.
맞춤 이벤트 트리거
CustomEvent API를 사용하면 개발자가 맞춤 이벤트를 만들고 DOM 노드에서 트리거하여 데이터를 전달할 수 있습니다.
event = new CustomEvent(typeArg, customEventInit);
typeArg - 이벤트의 이름을 나타내는 DOMString
customEventInit - 선택적 매개 변수입니다 (다음 예에서는 e 로 전달됩니다).
당신은 첨부 할 수 있습니다 eventListeners 에 document 또는 HTML 요소.
맞춤 이벤트가 추가되고 요소 (또는 문서)에 바인딩되면 자바 스크립트에서 수동으로 이벤트를 발생시킬 수 있습니다.
document.addEventListener("event-name", function(e) {
console.log(e.detail); // logs custom object passed from the event.
});
var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);