Event ๐ŸŽŠ

ํ”„๋ ˆ์ฒผยท2023๋…„ 3์›” 8์ผ
0

Event (์ด๋ฒคํŠธ) ?

์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ๋ ค์ฃผ๋Š” HTML ์š”์†Œ์— ๋Œ€ํ•œ ์‚ฌ๊ฑด์˜ ๋ฐœ์ƒ
JavaScript๋ฅผ ํ†ตํ•ด ๋ฐœ์ƒํ•œ ์ด๋ฒคํŠธ์— ํŠน์ • ๋™์ž‘์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.

ex) hover, click ...

Event Type (์ด๋ฒคํŠธ ํƒ€์ž…)

๋ฐœ์ƒํ•œ ์ด๋ฒคํŠธ์˜ ์ข…๋ฅ˜
ex) ํผ, ํ‚ค๋ณด๋“œ, ๋งˆ์šฐ์Šค, HTML DOM, WIndow ๊ฐ์ฒด ๋“ฑ..)

<!-- click ์ด๋ฒคํŠธ ์˜ˆ์‹œ -->
<span onclick="changeText(this)">ํด๋ฆญํ•ด์ฃผ์„ธ์š” click here</p>

<script>
  function changeText(element){
  	element.innerHTML = " ๋ฐ”๊ฟ€ ๋‚ด์šฉ ์ž…๋ ฅ !";
  }
</script>

Event Handler(์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ)

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

// HTML์ด load๋ ๋•Œ ๋ฐœ์ƒ (์‹คํ–‰)
window.onload = function() {
 	var txt = document.getElementById("text");
  	text.innerHTML = "HTML ๋ฌธ์„œ๊ฐ€ ๋กœ๋“œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค."
}
profile
ํ๋ฅด๋Š” ๋Œ€๋กœ ์„ค๋ช…ํ•˜๊ธฐ && ํ‹€๋ฆฌ๋ฉด ํ›ˆ์ˆ˜ ๋‘ฌ ์ฃผ์„ธ์š”... ๐Ÿ˜Š

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