-
๐ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive | ์ด๋ฒคํธ [์ด๋ฒคํธ ํธ๋ค๋ฌ]TIL 2022. 5. 26. 16:12
์ฉ์ด ์ ๋ฆฌ
- ์ด๋ฒคํธ ๋ฒ๋ธ๋ง(event bubbling) : ์ด๋ฒคํธ ํ๊น ์์์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด, ์ต์๋จ์ ๋ถ๋ชจ ์์๊น์ง ๊ฐ๊ฐ ํ ๋น๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์๋๋ ๊ฒ.
- ์ด๋ฒคํธ ์บก์ฒ๋ง(event capturing)
3๋จ๊ณ์ ์ด๋ฒคํธ ํ๋ฆ์์ ์ฒซ ๋ฒ์งธ ๋จ๊ณ์ด๋ค.
1. ์บก์ฒ๋ง ๋จ๊ณ : ์ด๋ฒคํธ๊ฐ ํ์ ์์๋ก ์ ํ๋๋ ๋จ๊ณ
2. ํ๊น ๋จ๊ณ
3. ๋ฒ๋ธ๋ง ๋จ๊ณ
๊ฐ์ฅ ์ต์์ ์กฐ์์์ ์๋(ํ๊น ์์)๋ก ์ด๋ฒคํธ๊ฐ ์ ๋ฌ๋๋ ๋จ๊ณ์ด๋ค.
์ด๋ฒคํธ(Event)
๋ธ๋ผ์ฐ์ ์์ ๋ก๊ทธ์ธ ๋ฒํผ์ ํด๋ฆญํ์ ๋, ๋ค๋ก ๊ฐ๊ธฐ ๋ฒํผ์ ํด๋ฆญํ์ ๋ ๋ธ๋ผ์ฐ์ ๋ ๋ฒํผ์ ์ญํ ์ ๋ง๊ฒ ๋์์ ์ํํ๋ค. ์ฌ์ฉ์๊ฐ ์ด๋ค ์ฌ๊ฑด(๋ฒํผ ํด๋ฆญ, ๋๋ธํด๋ฆญ, enter ๋ฑ)์ ๋ฐ์์์ผฐ์ ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฅผ ๊ฐ์งํ์ฌ ์ด๋ฒคํธ(๋ก๊ทธ์ธ์ ํ๋ค, ๋ค์ ํ์ด์ง๋ก ๋๊ธด๋ค ๋ฑ)๋ฅผ ๋ฐ์์ํจ๋ค.
์์ ์ฝ๋๋ ๋ฒํผ์ ํด๋ฆญ(onclick)์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์์ ๋ console.log("button clicked!") ํจ์๊ฐ ์คํ๋๋๋ก ํ๋ ์ฝ๋์ด๋ค. ์ด๋ฒคํธ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ(ํจ์)๋ฅผ ํ ๋นํ๋ฉด, ํด๋น ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ํธ์ถํ๋ค.
๋ค์ํ ์ด๋ฒคํธ ๋ชฉ๋ก์ ์๋์์ ํ์ธํ ์ ์๋ค.
์ด๋ฒคํธ ์ฐธ์กฐ | MDN
DOM ์ด๋ฒคํธ๋ ๋ฐ์ํ ํฅ๋ฏธ๋ก์ด ๊ฒ์ ์ฝ๋์ ์๋ฆฌ๊ธฐ ์ํด ์ ๋ฌ๋ฉ๋๋ค. ๊ฐ ์ด๋ฒคํธ๋ Event ์ธํฐํ์ด์ค๋ฅผ ๊ธฐ๋ฐ์ผ๋กํ ๊ฐ์ฒด์ ์ํด ํํ๋๋ฉฐ ๋ฐ์ํ ๊ฒ์ ๋ํ ๋ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ์ป๋๋ฐ ์ฌ์ฉ๋๋ ์ถ๊ฐ
developer.mozilla.org
์ด๋ฒคํธ ํธ๋ค๋ฌ(Event Handler)
์ด๋ฒคํธ ํธ๋ค๋ฌ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ์คํ๋ ๋์์ด๋ค.
์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋ฑ๋กํ๋ ๋ฐฉ๋ฒ์ 3๊ฐ์ง๊ฐ ์๋ค.
1. ์์ฑ์ผ๋ก ๋ฃ์ด์ฃผ๊ธฐ
HTML Event Attributes
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
html event attributes๋ฅผ ์ด์ฉํ ๋ฐฉ์์ด๋ค. ๋ค๋ฅธ ์์ฑ์ฒ๋ผ ์ด๋ฒคํธ ์์ฑ์ ๊ฐ์ผ๋ก ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค.
์ฃผ์์ฌํญ : ํจ์ ํ ๋น(ํจ์ ์ฐธ์กฐ)์ด ์๋, ํจ์ ํธ์ถ์ ํด์ฃผ์ด์ผ ํ๋ค.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button onclick="alert('button clicked!')">click!</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button onclick="onclickHandler();">click!</button> <script> const onclickHandler = () => { alert("button clicked!"); }; </script> </body> </html>
ํจ์ ์ฐธ์กฐ๊ฐ ์๋, ํจ์ ํ ๋น์ ํ๋ฉด ํจ์ ๊ฒฐ๊ณผ ๊ฐ์ด ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ก ๋ฑ๋ก๋๋ค.
- ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ด๋ถ์ this : window ๊ฐ์ฒด
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button onclick="onclickHandler(this);">click!</button> <script> const onclickHandler = (val) => { console.log(val);//<button onclick="onclickHandler(this);">click!</button> }; </script> </body> </html>
2. ํ๋กํผํฐ๋ก ๋ฑ๋กํ๊ธฐ
์ด๋ฒคํธ๋ฅผ ๊ฑธ์ด์ค ์์์ ์ด๋ฒคํธ ํ๋กํผํฐ ๊ฐ์ผ๋ก ํจ์๋ฅผ ๋ฐ์ธ๋ฉํ๋ ๋ฐฉ์์ด๋ค.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button>click!</button> <script> $target = document.querySelector("button"); $target.onclick = () => { alert("button clicked!"); }; </script> </body> </html>
- ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ด๋ถ์ this : ์ด๋ฒคํธ๋ฅผ ๋ฐ์ธ๋ฉํ DOM ์์
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button class="btn01">click!</button> <script> $target = document.querySelector(".btn01"); $target.onclick = function(e){ console.log(this); //<button class="btn01">click!</button> console.log(this === e.currentTarget); //true }; </script> </body> </html>
3. addEventListener ๋ฉ์๋ ์ฌ์ฉ
[๊ตฌ๋ฌธ]
addEventListener(eventType, eventHandler, options, useCapture);
parameter
- type : ์ด๋ฒคํธ ์ ํ
- eventHandler : ์ด๋ฒคํธ ํธ๋ค๋ฌ ํจ์ ์ด๋ฆ
- options
- capture : ์ด๋ฒคํธ ์บก์ฒ๋ง ๋จ๊ณ์์ ์ด๋ฒคํธ๋ฅผ ์คํํ ์ง ์ค์ | true or false(default : ๋ฒ๋ธ๋ง ๋จ๊ณ์์ ์ด๋ฒคํธ ๋์)
- once : ๋ฑ ํ ๋ฒ๋ง ์ด๋ฒคํธ๋ฅผ ์คํํ๊ณ ์ด๋ฒคํธ๋ฅผ ์ ๊ฑฐํ ์ง ์ค์ | true or false(default)
- passive : preventDefault()๋ฅผ ํธ์ถํ ์ง ์ค์ | true or false(default)
- signal :
- useCapture : ์บก์ฒ๋ง, ๋ฒ๋ธ๋ง์์ ์กฐ์ | true or false(default)
return
๋ฐํ ๊ฐ ์์.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button>click!</button> <script> $target = document.querySelector("button"); $target.addEventListener("click", () => { alert("clicked!"); }); </script> </body> </html>
- ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ด๋ถ์ this : ์ด๋ฒคํธ๋ฅผ ๋ฐ์ธ๋ฉํ DOM ์์
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button>click!</button> <script> $target = document.querySelector("button"); $target.addEventListener("click", function(e){ console.log(this);//<button>click!</button> console.log(this === e.currentTarget); //true }); </script> </body> </html>
์ด๋ฒคํธ ๊ฐ์ฒด
์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ๐ ์ด๋ฒคํธ ๊ฐ์ฒด๊ฐ ์์ฑ๋๊ณ ๐ ์ด๋ฒคํธํธ๋ค๋ฌ์ ์ฒซ ๋ฒ์งธ ์ธ์๋ก ์๋์ผ๋ก ๋ด๊ธด๋ค.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button>click!</button> <script> $target = document.querySelector("button"); $target.onclick = function(){ alert("clicked 1!"); }; $target.addEventListener("click", (eventObj) => { console.log(eventObj); }); </script> </body> </html>
์ด๋ฒคํธ ๊ฐ์ฒด์๋ ์ด๋ฒคํธ์ ๊ด๋ จ๋ ์ฌ๋ฌ ๊ฐ์ง ์ ๋ณด๊ฐ ๋ด๊ฒจ์๋ค.
์์ 1)
<html> <head> <style> #wrap{ position : fixed; bottom : 0; } .infobox{ border:10px solid skyblue; display : inline-block; background-color: yellow; } </style> </head> <body> <h1>ํด๋ฆญ์ ๋ง์ฐ์ค์ขํ / ๋ฆฌ์ฌ์ด์ง ์ ์ฐฝ์ ํฌ๊ธฐ / ์คํฌ๋กค ์ ์คํฌ๋กค๊ธธ์ด</h1> <div id="wrap"> <h3 id="info1" class="infobox"></h3> <h3 id="info2" class="infobox"></h3> <h3 id="info3" class="infobox"></h3> </div> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <p>some scroll here.....</p> <script> $html = document.querySelector("html"); $html.addEventListener("click", function(e){ //ํด๋ฆญ ์ ๋ง์ฐ์ค x์ y์ขํ let x = e.pageX; let y = e.pageY; document.querySelector("#info1").textContent = `x์ขํ : ${x} , y์ขํ : ${y}`; }); window.addEventListener("resize", function(e){ //์ฐฝ ๋๋น ๋ณ๊ฒฝ ์ ์ฐฝ์ width, height let w = e.target.innerWidth; let h = e.target.innerHeight; document.querySelector("#info2").textContent = `์ฐฝ์ ๋๋น : ${w}, ์ฐฝ์ ๋์ด : ${h}`; }); window.addEventListener("scroll",function(e){ //์คํฌ๋กค ์ ์คํฌ๋กค ๋ ๊ธธ์ด let length = this.scrollY; document.querySelector("#info3").textContent = `์คํฌ๋กค๊ธธ์ด : ${length}`; }); </script> </body> </html>
๋ฒ๋ธ๋ง๊ณผ ์บก์ฒ๋ง
ko.javascript.info
'TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
โฑ๏ธ ์คํฑ์์น ์ ์ํ๊ธฐ | setInterval , String.padStart (0) 2022.09.05 ๐ ํ๋ฒ๊ฑฐ ๋ฒํผ ์ ์ํ๊ธฐ (0) 2022.09.03 ๐ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive | #2 DOM [์์ ๋ ธ๋ ์ ํํ๊ธฐ] (0) 2022.05.25 ๐ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive | #1 DOM [DOM ์ด๋?] (0) 2022.05.25 20.09.15_TIL (0) 2020.09.15