๐Ÿ‘ป์ด๋ฒคํŠธ(event)์— ๋Œ€ํ•˜์—ฌ...

eunoiaยท2021๋…„ 3์›” 17์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
2/6
post-thumbnail

์ด๋ฒคํŠธ(event)๋Š” ํด๋ฆญ ํ–ˆ์„ '๋•Œ', ์Šคํฌ๋กค์„ ํ–ˆ์„ '๋•Œ', ํ•„๋“œ์˜ ๋‚ด์šฉ์„ ๋ฐ”๊พธ์—ˆ์„ '๋•Œ' ๊ฐ™์ด ์–ด๋–ค ์‚ฌ๊ฑด ๋˜๋Š” ํ–‰์œ„๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ด๋ฒคํŠธ๋Š” DOM๊ณผ ๋ฐ€์ฒฉํ•œ ๊ด€๊ณ„๋ฅผ ๊ฐ€์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

ํ”„๋กœ๊ทธ๋žจ์—๋Š” ์ด๋Ÿฐ ์‚ฌ์šฉ์ž์˜ ํ–‰์œ„์™€ ์‚ฌ๊ฑด์„ ์˜ˆ์ธกํ•˜์—ฌ ๋ฏธ๋ฆฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ด๋ฒคํŠธ๊ฐ€ ์ค€๋น„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿค”์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ด๋ฅผ ๊ฐ์ง€ํ•˜๊ณ  ๋Œ€์‘ํ•˜๋Š” ์ฒ˜๋ฆฌ ํ˜ธ์ถœํ•ด ์ฃผ์–ด์•ผ ํ•˜๋Š”๋ฐ...? ๐Ÿค”

๋ฐ”๋กœ, ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ด๋ฒคํŠธ๋ฅผ ์ž๋™์œผ๋กœ ๊ฐ์ง€ํ•˜๊ณ  ๋ฐœ์ƒ ์‹œ์— ํ†ต์ง€๋ฅผ ํ•ด ์ค๋‹ˆ๋‹ค!

์ด๋Ÿฌํ•œ ๊ณผ์ •์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์™€ ์›นํŽ˜์ด์ง€๋Š” ์ƒํ˜ธ ์ž‘์šฉ(interaction)์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๐Ÿค”๊ทธ๋Ÿผ ์ด๋ฒคํŠธ์™€ ํ•ญ์ƒ ๊ฐ™์ด ๋ถ™์–ด๋‹ค๋‹ˆ๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์™€ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ๋ฌด์—‡์ผ๊นŒ์š”?๐Ÿค”

์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ(event handler)๋ž€?

์ด๋ฒคํŠธ(event)๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๊ทธ ์ฒ˜๋ฆฌ๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ์‹คํ–‰ ํ•จ์ˆ˜๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค. ์ฆ‰, ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๋™์ž‘ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ(event litener)๋ž€?

์ง€์ •๋œ ํƒ€์ž…์˜ ์ด๋ฒคํŠธ๊ฐ€ ํŠน์ • ์š”์†Œ์—์„œ ๋ฐœ์ƒํ•˜๋ฉด, ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” ๊ทธ ์š”์†Œ์— ๋“ฑ๋ก๋œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์‹คํ–‰์‹œํ‚ต๋‹ˆ๋‹ค.

๐Ÿพ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ

์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ์—ฐ๊ฒฐ๋œ ํŠน์ • DOM์—์„œ ์ง€์ •๋œ ํƒ€์ž…์˜ ์ด๋ฒคํŠธ ๋ฐœ์ƒ

โ‡’ ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” ์ž๋™์œผ๋กœ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์— ์—ฐ๊ฒฐ๋œ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ์‹คํ–‰ ํ”„๋กœ์„ธ์Šค

์ด๋ฒคํŠธ ๋“ฑ๋ก ๋ฐฉ๋ฒ•

์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ํ•ด๋‹น ๊ฐ์ฒด๋‚˜ ์š”์†Œ์— ๋“ฑ๋ก๋˜์–ด์•ผ๋งŒ ํ˜ธ์ถœ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  • inline ๋ฐฉ๋ฒ•

    <input type="button" onclick="alert('Hello world');" value="button" />
  • property๋กœ ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ๋ฒ•

    ์ด๋ฒคํŠธ ๋Œ€์ƒ์— ํ•ด๋‹นํ•˜๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋กœ ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

    <input type="button" id="target" value="button" />
    
      var dom = document.getElementById('target');
      dom.onclick = function(){
          alert('Hello world');
      }
  • addEventListener() ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•

    ๊ฐ€์žฅ ๊ถŒ์žฅ๋˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค! ์—ฌ๋Ÿฌ๊ฐœ์˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋“ฑ๋กํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ์š”. ํ•˜์ง€๋งŒ ํ•ด๋‹น ๋ฐฉ์‹์€ internet explore8 ์ดํ•˜์—์„œ๋Š” ํ˜ธํ™˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

    dom.addEventListener('click', function(event){
        alert('Hello world, '+ event);
    });

๐Ÿฑโ€๐Ÿ’ป์ด๋ฒคํŠธ ๊ฐ์ฒด(event object)

dom.addEventListener('click', function(event){
    alert('Hello world, '+ event);
});

๐Ÿค”์ด ์ฝ”๋“œ์—์„œ ๋ณด์ด๋Š” event๋Š” ๋ฌด์—‡์„ ์˜๋ฏธํ• ๊นŒ์š”?๐Ÿค”

๋ฐ”๋กœ, ์ด๋ฒคํŠธ ๊ฐ์ฒด(event object) ์ž…๋‹ˆ๋‹ค.

์ด๋ฒคํŠธ ๊ฐ์ฒด(event object)๋ž€ ํŠน์ • ํƒ€์ž…์˜ ์ด๋ฒคํŠธ์™€ ๊ด€๋ จ ์žˆ๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ์ „๋‹ฌ๋˜๋Š” ์ธ์ˆ˜๊ฐ€ ๋ฐ”๋กœ ์ด๋ฒคํŠธ ๊ฐ์ฒด ์ž…๋‹ˆ๋‹ค.

๋ชจ๋“  ์ด๋ฒคํŠธ ๊ฐ์ฒด๋Š” ํ•ด๋‹น ์ด๋ฒคํŠธ์— ๋Œ€ํ•œย ์ƒ์„ธ ์ •๋ณด์™€ ์ด๋ฒคํŠธ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๋ฉ”์†Œ๋“œ๋“ค์ด ๋“ค์–ด์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ, ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๋Š”๋ฐ ...

  • ์ด๋ฒคํŠธ์˜ ํƒ€์ž…์„ ๋‚˜ํƒ€๋‚ด๋Š” typeํ”„๋กœํผํ‹ฐ
  • ์ด๋ฒคํŠธ์˜ ๋Œ€์ƒ์„ ๋‚˜ํƒ€๋‚ด๋Š” targetํ”„๋กœํผํ‹ฐ

๋Œ€ํ‘œ์ ์œผ๋กœ ์ด ๋‘ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

var btn = document.getElementById("btn"); // ์•„์ด๋””๊ฐ€ "btn"์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•จ.
btn.addEventListener("click", clickBtn);  // ์„ ํƒํ•œ ์š”์†Œ์— click ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋“ฑ๋กํ•จ.
function clickBtn(event) {
    document.getElementById("text").innerHTML =
    "์ด ์ด๋ฒคํŠธ์˜ ํƒ€์ž…์€ " + event.type + 
		"์ด๋ฒคํŠธ์˜ ๋Œ€์ƒ์€ " + event.target + "์ž…๋‹ˆ๋‹ค.";
}

์ด๋ฒคํŠธ ํ˜ธ์ถœ ์ˆœ์„œ

<div id='dom' onclick="alert('Hello world');"></div>
document.getElementById('dom').addEventListener('click', event => {alert('Hi')});
document.getElementById('dom').addEventListener('click', event => {alert('Hello')});

์ด๋•Œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๋Š”

  1. ์ด๋ฒคํŠธ์˜ ๋Œ€์ƒ์ด ๋˜๋Š” ๊ฐ์ฒด๋‚˜ ์š”์†Œ์— ํ”„๋กœํผํ‹ฐ๋กœ ๋“ฑ๋กํ•œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๊ฐ€์žฅ ๋จผ์ € ํ˜ธ์ถœ
  2. addEventListener() ๋ฉ”์†Œ๋“œ ์‚ฌ์šฉํ•œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋“ฑ๋กํ•œ ์ˆœ์„œ๋Œ€๋กœ ํ˜ธ์ถœ

์ด๋ฒคํŠธ ์ „ํŒŒ

์ด๋ฒคํŠธ๋Š” ํฌ๊ฒŒ 3๊ฐ€์ง€๋กœ ๊ตฌ๋ถ„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  • ๋ฒ„๋ธ”๋ง
  • ์บก์ณ๋ง
  • ํƒ€๊ฒŸ(์‹ค์ œ ์ด๋ฒคํŠธ ๋ฐœ์ƒ ์š”์†Œ)

๐ŸŽˆ๋ฒ„๋ธ”๋ง(bubbling) ์ „ํŒŒ ๋ฐฉ์‹

์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ์š”์†Œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด DOM ํŠธ๋ฆฌ๋ฅผ ๋”ฐ๋ผ ์œ„์ชฝ์œผ๋กœ ์˜ฌ๋ผ๊ฐ€๋ฉฐ๐Ÿ‘† ์ „ํŒŒ๋˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

//๊ฐ ์š”์†Œ๋งˆ๋‹ค ๋ฒ„๋ธ”๋ง ๋ฐฉ์‹์œผ๋กœ click ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋“ฑ๋ก
document.getElementById("divBox").addEventListener("click", event => {
	document.getElementById("text").innerHTML += "div ์š”์†Œ๋ฅผ click ํ•˜์…จ๋„ค์š”!<br>";
});
document.getElementById("paraBox").addEventListener("click", event => {
	document.getElementById("text").innerHTML += "p ์š”์†Œ๋ฅผ click ํ•˜์…จ๋„ค์š”!<br>";
});
document.getElementById("spanBox").addEventListener("click", event => {
	document.getElementById("text").innerHTML += "span ์š”์†Œ๋ฅผ click ํ•˜์…จ๋„ค์š”!<br>";
});

์žฅ์ ๐Ÿ‘

  • ๋‹ค์ˆ˜์˜ ์š”์†Œ์— ๊ณตํ†ต์œผ๋กœ ์ ์šฉ๋˜๋Š” ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋”ฐ๋กœ ๋“ฑ๋กํ•  ํ•„์š” ์—†์ด ๊ณตํ†ต๋œ ์กฐ์ƒ ์š”์†Œ์— ํ•œ ๋ฒˆ๋งŒ ๋“ฑ๋กํ•˜๋ฉด ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“ธ์บก์ณ๋ง(capturing) ์ „ํŒŒ ๋ฐฉ์‹

์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ์š”์†Œ๊นŒ์ง€ DOM ํŠธ๋ฆฌ์˜ ์ตœ์ƒ์œ„๋ถ€ํ„ฐ ์•„๋ž˜์ชฝ์œผ๋กœ ๋‚ด๋ ค๊ฐ€๋ฉฐ๐Ÿ‘‡ ์ „ํŒŒ๋˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

document.getElementById("divBox").addEventListener("click", clickDivEvent, true);
document.getElementById("paraBox").addEventListener("click", clickParaEvent, true);
document.getElementById("spanBox").addEventListener("click", clickSpanEvent, true);

์บก์ณ๋ง ์ „ํŒŒ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ addEventListener() ๋ฉ”์†Œ๋“œ์˜ ์„ธ๋ฒˆ์งธ ์ธ์ˆ˜์— true ๊ฐ’์„ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.

target.addEventListener(type, listener[, useCapture]);

์ด๋ฒคํŠธ ์ „ํŒŒ์˜ ์ทจ์†Œ

ํŠน์ • ๋ฉ”์†Œ๋“œ๋‚˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ฒคํŠธ์˜ ์ „ํŒŒ๋ฅผ ์ทจ์†Œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • stopPropagation() ๋ฉ”์†Œ๋“œ : ํƒœ๊ทธ ํด๋ฆญ ์‹œ ๋ถ€๋ชจ์—๊ฒŒ ์ด๋ฒคํŠธ๊ฐ€ ์ „๋‹ฌ(๋ฒ„๋ธ”๋ง)๋˜์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
  • cancelBubbleํ”„๋กœํผํ‹ฐ
function clickLink(event) {
    event.preventDefault();  // ๋งํฌ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ทจ์†Œํ•จ.
    document.getElementById("text").innerHTML += "๋งํฌ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ๋ง‰์•˜์–ด์š”!<br>";
    event.stopPropagation(); // ์ด๋ฒคํŠธ์˜ ์ „ํŒŒ๋ฅผ ์ทจ์†Œํ•จ.
    document.getElementById("text").innerHTML += "์ด๋ฒคํŠธ์˜ ์ „ํŒŒ๋ฅผ ๋ง‰์•˜์–ด์š”!<br>";
}

์ด๋ฒคํŠธ ๊ธฐ๋ณธ ๋™์ž‘์˜ ์ทจ์†Œ

ํŠน์ • ์ด๋ฒคํŠธ( ex : <a>)๋Š” ๋ฏธ๋ฆฌ ์ง€์ •๋œ ๊ธฐ๋ณธ ๋™์ž‘์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ  ์ด๋ฅผ ์‹คํ–‰ํ•˜์ง€๋งŒ ํŠน์ • ๋ฉ”์„œ๋“œ๋‚˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ด์šฉํ•ด ๊ธฐ๋ณธ ๋™์ž‘์˜ ์‹คํ–‰์„ ์ทจ์†Œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • preventDefalut() ๋ฉ”์†Œ๋“œ : ๊ธฐ๋ณธ ๋™์ž‘์„ ์ทจ์†Œํ•ฉ๋‹ˆ๋‹ค.
  • returnValue ํ”„๋กœํผํ‹ฐ
document.getElementById("linkBox").addEventListener("click", event => {
    event.preventDefault(); // ๋งํฌ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ทจ์†Œํ•จ.
    document.getElementById("text").innerHTML += "๋งํฌ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ๋ง‰์•˜์–ด์š”!<br>";
    document.getElementById("text").innerHTML += "a ์š”์†Œ๋ฅผ click ํ•˜์…จ๋„ค์š”!<br>";
});

์ถœ์ฒ˜

https://codedragon.tistory.com/5743

https://blog.daum.net/tstory/215

https://ooeunz.tistory.com/17

http://webcache.googleusercontent.com/search?q=cache:m2skDGrCTtkJ:www.tcpschool.com/javascript/js_event_eventListenerCall+&cd=5&hl=ko&ct=clnk&gl=kr

https://www.zerocho.com/category/JavaScript/post/57432d2aa48729787807c3fc

profile
๐Ÿ’ป .net, Spring

0๊ฐœ์˜ ๋Œ“๊ธ€