JavaScript9 [JavaScript] event.target 과 event.currentTarget 차이 See the Pen Untitled by 이가은 (@wymdzlvu-the-looper) on CodePen. 위 예제에서는 사용자가 버튼을 클릭하게 되면 event.target은 실제 클릭한 버튼을 가리키고, event.currentTarget은 실제 이벤트가 걸려있는 컨테이너 DIV를 가리키게 된다. 1.event.target: 이벤트가 처음으로 발생한 원본 요소를 참조이벤트가 트리거된 실제 요소를 반환이벤트가 버블링되거나 캡처링될 때도 처음 발생한 요소를 유지한다.2.event.currentTarget: 현재 이벤트 핸들러가 부착된 요소를 참조이벤트 핸들러가 실행되는 동안 이벤트를 청취하고 있는 요소를 반환한다.this와 유사하게 동작하며, 핸들러가 연결된 요소를 보장한다. Item 1 .. 2024. 11. 27. [JQuery] remove(), detach(), empty() 메서드 차이점 1. remove()선택한 요소와 해당 요소의 자식 요소를 DOM에서 제거한다. 요소와 그에 연결된 이벤트 핸들러도 함께 삭제된다. $("#id").remove();완전히 제거되므로 메모리에서 해당 요소를 복구할 수 없다. 2. detach()선택한 요소와 자식 요소를 DOM에서 제거하지만 메모리 상에서 데이터와 이벤트는 유지된다. 나중에 같은 요소를 다시 DOM에 추가해야 할 경우 유용하다.let element = $("#id").detach();$("body").append(element);이벤트 핸들러나 데이터를 보존해야 하는 경우 사용하면 좋다. 3. empty()선택한 요소의 자식 요소만 제거한다. 선택한 요소 자체는 유지된다.요소 안의 내용만 삭제하고 선택한 요소의 이벤트 핸들러나 데이.. 2024. 11. 26. [JavaScript] 자바스크립트 디버깅하기 티스토리는 다 좋은데.. 이모티콘이 제한적이어서 아쉽다ㅠㅠ카카오톡과 연동했으면 이모티콘도 연동됐으면 좋겠다 ㅎ_ㅎ (너무 욕심인가) 리모트 박스의 목록이 없는 경우에는 "목록이 존재하지 않습니다." 라는 문구를 출력하고 싶은데 어디선가 다시 값을 세팅해주는건지,, "()" 이런 문구로 바뀌어 출력된다. 콘솔 로그만 계속 찍어보다가 .. 자바스크립트는 디버깅 안 되나..? 디버깅을 잘 사용할줄은 모르지만 .. 이렇게 콘솔 찍는 것보다는 낫겠지 역시 디버깅하는 방법이 있었다 !https://ko.javascript.info/debugging-chrome Chrome으로 디버깅하기 ko.javascript.info모던 JavaScript 튜토리얼에 잘 나와있다. 크게 두 가지 방법이 있었는데,1. 개발.. 2024. 11. 21. [JavaScript] script async / defer 차이점 자바스크립트 공부 사이트 https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint Document: elementFromPoint() method - Web APIs | MDNThe elementFromPoint() method, available on the Document object, returns the topmost Element at the specified coordinates (relative to the viewport).developer.mozilla.org script async와 defer의 차이점1. 안에 를 넣는 경우2. 의 가장 끝에 를 넣는 경우3. 안에서 async src="#"> 를 주는 경우.. 2024. 10. 9. [JQuery] <select> 태그 강제 선택하기 다음과 같은 드롭박스에서 특정 값을 임의로 선택해주고싶을 때가 있다. 키보드 모니터 책상 JQuery $('#item').val('monitor').trigger('change'); 자동으로 모니터 옵션이 선택된다. 2024. 9. 12. [JS] 이벤트 버블링 (event bubbling) https://ko.javascript.info/bubbling-and-capturing 버블링과 캡처링 ko.javascript.info모던 자바스크립트의 [문서, 이벤트, 인터페이스 -> 이벤트 기초: 버블링과 캡처링] 학습 내용입니다. 버블링이란 무엇일까? 먼저 예제를 한번 보자. EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. 태그를 클릭했는데, div에 할당된 이벤트 핸들러가 동작한다. 핸들러는 에 할당되어 있지만, 이나 같은 중첩 태그를 클릭해도 동작하는 이유가 뭘까? 버블링 (Bubbling)버블링의 원리는 간단하다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 핸들러 요소가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면.. 2024. 9. 1. [JQuery] 옷 사이즈 선택 버튼 html Select Size XS S M L XL XXL css.select_size { width: 500px;}.size_btn { display: inline-block; background-color: #b5b3b3; width: 50px; height: 50px; align-content: center; text-align: center; font-family: 'Nanum Gothic', sans-serif; font-weight: bold; cursor: pointe.. 2024. 7. 23. [JavaScript] null & undefined 에 대해 알고싶다.. JavaScript의 데이터 형식 JavaScript의 데이터 형식에는 다음과 같은 형식이 있다. 1. 기본 형식- String- Number- Boolean2. 합성(참고) 형식- Object- Array3. 특정 형식- null- undefined 이 중 null과 undefined특정 형식에 대해서 알아보자 null널은 보통 객체 타입의 특수한 값, 즉 어떠한 객체도 나타내지 않는 값으로 취급된다고 한다. 어떤 변수가 null값을 가진다면, 그 변수는 기본 형식이나 합성 형식의 값을 담고 있지 않다는 것을 의미한다. 그래서 어떤 변수의 값을 초기화 하고 싶을 때에는 null을 사용한다. 💡null의 사용null은 숫자 문맥에서 사용되면 0으로 변환되며, 문자열 문맥에서는 "null"로,Boole.. 2024. 7. 8. [JavaScript] Virtual Scroll 구현하기(feat.Intersection Observer) 과제도중.. 디비 테이블을 불러오는 과정에서 적절한 where문을 걸어주지 않아 수만건의 데이터가 한번에 불러와지는 문제가 있었다. 이로 인해 DOM을 그리는 과정에서 시간이 몇 초 이상 걸리거나 심할 경우 브라우저 탭이 먹통이 되기도 했다. 물론 데이터를 잘못 불러왔기 때문에 생긴 문제였지만 실제로 이렇게 많은 데이터가 필요한 경우에는 어떻게 해야할까? 이 때 사용할 수 있는 것이 Paging, Virtual Scroll이라고 한다. 그 중에서 오늘은 Virtual Scroll에 대해 알아보았다. Virtual Scroll이란?가상 스크롤은 화면에서 보이지 않는 부분의 내용을 출력하지 않고, 화면에 보여질 때만 출력하는 방식의 스크롤을 말한다. 많은 양의 리스트 데이터를 화면에 그리는 경우, 모든 항.. 2024. 7. 2. 이전 1 다음
