basic eventListener
syntax
element.addEventListener("type-of-event", functiontoExecute)
<element>
object.onclick=function(){myScript};
object.addEventListener("click", myScript);
2번과 3번의 차이: 2번의 경우 이벤트를 덮어씀, 3번의 경우 이벤트가 누적됨
IE 6,7,8에서는 addEventListener가 지원 안됨
이벤트 속성(onclick)에 이벤트 핸들러를 등록할 때에는 함수 그 자체로 등록해야 함. 함수 실행을 등록하는 것이 아님.
To pass arguments to addEventListener, you need to write it like this:
event handler functions are passed an argument: the event object. This object holds additional information about the event. For example, if we want to know which mouse button was pressed, we can look at the event object’s button property. ~El. JS
stopPropagation
an event handler can call the
stopPropagation
method on the event object to prevent handlers further up from receiving the event. This can be useful when, for example, you have a button inside another clickable element and you don’t want clicks on the button to activate the outer element’s click behavior.
outward, from the node where it happened to that node’s parent node and on to the root of the document. the more specific handler—the one on the button—gets to go first.
The standard DOM Events describes 3 phases of event propagation:
Capturing phase – the event goes down to the element.
Target phase – the event reached the target element.
Bubbling phase – the event bubbles up from the element.
<!doctype html>
<body>
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form>FORM
<div>DIV
<p>P</p>
</div>
</form>
<script>
for(let elem of document.querySelectorAll('*')) {
elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
}
</script>
</body>
The code sets click handlers on every element in the document to see which ones are working. If you click on <p>, then the sequence is:
target
propertyMost event objects have a target
property that refers to the node where they originated. You can use this property to ensure that you’re not accidentally handling something that propagated up from a node you do not want to handle.
if you have a node containing a long list of buttons, it may be more convenient to register a single click handler on the outer node and have it use the target property to figure out whether a button was clicked, rather than register individual handlers on all of the buttons
<button>A</button>
<button>B</button>
<button>C</button>
<script>
document.body.addEventListener("click", event => {
if (event.target.nodeName == "BUTTON") {
console.log("Clicked", event.target.textContent);
}
});
</script>
event.target.innerText
event.target.textContent
Stops the default behavior associated with the event
let link = document.querySelector("a");
link.addEventListener("click", event => {
console.log("Nope.");
event.preventDefault();
});
keydown
Fires every time the key repeats (held down)
browser event handlers are scheduled when the event occurs, but must wait for all other scripts to finish running to fire. If the loop is occupied with other stuff, any interaction with the page has to wait until it's done processing what came before.
which is why web workers exist - so you can run time-consuming js stuff alongside the main script on its own timeline so it does not freeze the page.
let squareWorker = new Worker("code/squareworker.js");
squareWorker.addEventListener("message", event => {
console.log("The worker responded:", event.data);
});
squareWorker.postMessage(10);
squareWorker.postMessage(24);
onchange
: when the value of an HTML element is changed (via JS)
학습목표
이벤트 객체에 대해서 더 자세히 알고 싶다면, 아래 키워드를 검색해서 학습