event.target
-
JavaScript 입문 : Canvas 이론 정리 - 그림판 만들기 (컬러버튼 만들고 색상별 선 그리기)컴퓨터 알아가기/JavaScript 2022. 12. 25. 19:30
지금까지 기본적인 캔버스 이론을 공부하면서 작동이 되는 원리를 중점으로 보았습니다. 도형을 만들고 마우스이벤트를 통하여 원하는 선을 그려 보았습니다. 이러한 원리를 기준으로 '약식 그림판'을 만들어 보도록 하겠습니다. 역시 본 내용은 '1분코딩의 캔버스 라이브 강좌'를 기본으로 공부하고 있습니다. 1. 그림판 기본 구조 반지름이 10인 작은 원으로 캔버스 위 선을 그려 보았으니 이제 그리는 선의 색상을 다양하게 만들어 클릭시마다 색이 변경되어 그림을 그리는게 기본 개념입니다. 한 5가지 정도 색상에 대한 버튼을 만들고 클릭이벤트를 통하여 버튼 색을 바꾸는 이벤트를 고려해야 하는데 각 버튼을 이벤트타겟에 대입시키면 되겠습니다. ① 컬러버튼 만들기 버튼이 들어가는 태그를 만들고 해당 버튼의 클래스명을 통하여..
-
JavaScript 입문 : addEventListener를 통한 이벤트 객체에 대한 이해컴퓨터 알아가기/JavaScript 2022. 10. 1. 19:30
자바스크립트를 공부하면서 많은 내용들이 머리속에 맴돌다 나가는 경우가 허다합니다. 이런경우는 다시 보면 이해가 되기도 합니다만 초보인 저로서는 지금 이순간 잘 이해가 안가는 두가지 내용이 있는데 하나는 이벤트타겟이라는 개념과 this라는 개념입니다. 해서 가능한 다른 자료를 찾아보고 이해를 하고자 하고 노력을 합니다만 지속적으로 상황에 따라 필요자료가 있으면 업데이트를 하면서 이해해 보도록 노력할 예정입니다. ▒ 이벤트 객체에 대한 이해 이벤트 객체에 대한 내용은 한번 정리를 한 적이 있습니다. 관련된 내용과 같이 보는게 좋을 듯 합니다 2022.07.12 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 이벤트 타겟 (event.target) 요소, textContent 사용 ..
-
JavaScript 입문 : 이벤트 타겟 (event.target) 요소, textContent 사용 이해컴퓨터 알아가기/JavaScript 2022. 7. 12. 19:30
자바스크립트를 공부하면서 웬만한 사람들은 쉽게 이해하지만 돌아서면 잊어바리는 저로서는 시간이 날때마다 찾아보고 복습해야합니다. 아직까지는 지치지 않는 제 모습에 스스로 고마워하며 금일은 알듯말듯한 event 요소를 클릭하여 함수를 발생시키는 event target에 대한 이해를 해보고자 합니다. 이것저것 일부 사례로 공부를 하고자 합니다. 1. Event target 이란 Event target을 사용한다는 의미는 이벤트가 발생한 요소를 연다는 뜻입니다. 좀 더 풀어설명하면 event target 요소는 브라우저에 표시되는 HTML을 말하고 이러한 event target 요소를 발생시키는 행위를 클릭이나 스크롤로 보면됩니다. 이러한 행위가 발생하였을 경우 함수가 실행이 됩니다. 보통 함수실행을 event..