JavaScript
[Javascript] 구조분해 할당(Destructuring) - 클릭 이벤트 객체 전달
fnow
2021. 10. 24. 21:10
반응형
구조분해 할당(Destructuring Assignment)에 대한 자세한 내용은 아래 페이지에서 확인할 수 있다.
[Javascript] 구조분해 할당(destructuring assignment)
ES6부터 구조분해 할당(destructuring assignment)이라는 문법이 등장했다. 말 그대로 어떤 배열이나 객체를 분해한 후 다시 할당하는 것이다. ES5와 ES6를 비교하며 알아보자. 목차 배열 구조분해 할당 객
fromnowwon.tistory.com
구조분해 할당을 활용하여 클릭한 객체의 정보를 전달받을 수 있다. 그 이벤트 객체 내의 정보만 따로 출력할 수도 있다. 아래에서 살펴보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, architecto veniam.</div> <script> const $div = document.querySelector("div"); // 이벤트 객체 출력 $div.addEventListener("click", (event) => { console.log(event.target); // <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, architecto veniam.</div> }); // 이벤트 객체 내의 target의 태그 네임만 출력 $div.addEventListener("click", ({target}) => { console.log(target.tagName); // DIV }); // 이벤트 객체 내의 target의 innerText만 출력 $div.addEventListener("click", ({target}) => { console.log(target.innerText); // Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, architecto veniam. }); </script> </body> </html> | cs |
반응형