본문 바로가기
728x90

프론트엔드/Javascript58

[Javascript] 이벤트의 추가 addEventListener() 자바 스크립트에서 이벤트의 추가 AddEventListener EventTarget.addEventListner(이벤트문자열 , 콜백함수); 간단 설명 ↓ 자바스크립트에서 이벤트의 추가 방법에는 여러가지가 있다. 사실 어떤 방법이 가장 좋다라는 정답은 없지만, 향후 유지보수 까지 생각한다면, 가독성이 좋고 같은 요소에 같은 여러개의 이벤트 등록이 가능한 addEventListener()의 사용을 권장한다. 이벤트는 상당히 많으나 하단의 예제에서는 쉬운 예를 위해 'Click' 이벤트로 작성해 보았다. 샘플 예제 ↓ [Html] [Javascript] let examBtn = document.querySelector('#exam-btn'); //클릭 이벤트 추가! addEventListener(이벤트명,콜.. 2021. 2. 2.
[Javascript] 이벤트 트리거 (Event Trigger) .dispatchEvent() Javascript - 이벤트 트리거 (event Trigger) .dispathEvent() 브라우저마다 기본 UI 스타일이 다른 엘리먼트가 존재한다. 예를들어 태그 같은 경우에도 Chorme과 IE10 에서의 출력 디자인이 다르다. 공통된 style의 제공을 위해 Input 태그가 아닌, 다른 버튼을 추가로 만들어 해당 버튼을 클릭시, 클릭 이벤트를 원하는 태그에 연결해주는 방식을 현업에서 많이 사용하고 있는데, 해당 방식을 Event Trigger 라고 한다. 샘플 예제 ↓ [HTML] [결과 출력 (트리거 적용 전)] [Javascript] let fileElem = document.querySelector('#file-element'); let fileBtn = document.querySele.. 2021. 2. 2.
[Javascript] 기본 이벤트 삭제 event.preventDefault() Javascript - preventDefault 자바스크립트에서는 편의를 위해 이벤트가 기본 설정되어 있는 태그가 존재한다. (예: a태그 클릭시, href 주소로 자동 이동 or 새로고침) 프로그램 작성자가 해당 기본 설정 기능의 사용을 원치 않는 경우에는 다음과 같은 명령어가 필요하다. event.preventDefault(); 샘플 예제 ↓ [Html] 기본 설정 이벤트 기능 삭제 예제 클릭! [Javascript] let aTag = document.querySelector('body>a'); aTag.addEventListener('click',function(e){ alert('클릭!'); }); [결과] 당연한 결과이지만, 아래 스크립트 추가를 통해 a태그의 기본 설정된 디폴트 이벤트를 없.. 2021. 2. 1.
[Javascript] 노드복사 importNode 노드의 복사 var node = document.importNode('복제 원하는 노드', boolean : 자식 노드 포함 여부); 반환 : [True인경우 : 자식 포함], [False인 경우 : 자식 미포함] 샘플 예제 ↓ [HTML] 번호 제목 내용 [Javascript] let temp = document.querySelector('template'); let tbody = document.querySelector('tbody'); //데이터 SET let db = [ {'id':'1','title':'title1','content':'content1'}, {'id':'2','title':'title2','content':'content2'}, {'id':'3','title':'title3','.. 2021. 2. 1.
[Javascript] 부모 태그 찾기 .parentElement 자바스크립트에서 부모 태그 찾기 - 기준태그.parentElement 샘플 예제 ↓ [HTML] - 제목 내용 1 title1 content1 2 title2 content2 3 title3 content3 [Javascript] var tbody = document.querySelector('section>table>tbody'); var totalCheck = document.querySelector('#total-check'); //상단 checkbox 체크시 전체 체크박스 체크 및 해제! totalCheck.addEventListener('click',e=>{ var checkboxList = document.querySelectorAll('.checkbox-class'); checkboxList.. 2021. 1. 31.
[Javascript] ClassList .contains/.add/.remove/.toggle 자바스크립트에서 특정 태그내 1. 여러개의 클래스 명 가져오기 - 태그명.classList (반환값 : 리스트로 반환 ['클래스1','클래스2','클래스3',value : '클래스1 클래스2 클래스3']) 2. 클래스 리스트 중 포함여부 확인 - 태그명.classList.contains(찾는 클래스명) (반환값 : true, false) 3. 클래스 추가 - 태그명.classList.add(추가할 클래스명) (반환값 : 없음) 4. 클래스 삭제 - 태그명.classList.remove(삭제할 클래스명) (반환값 : 없음) 5. 클래스 토글 - 태그명.classList.toggle(없으면 추가, 있으면 삭제할 클래스명) (반환값 : true, false) 샘플 예제 ↓ Javascript ClassList.. 2021. 1. 31.
[Javascript] 이벤트 Event 웹 개발을 하다보면 부모 엘리먼트 내에 여러개의 버튼을 포함해야 하는 경우가 많다. 물론 모든 버튼에 각각 클릭 이벤트 따로 할당하여 서로 다른 기능을 아래의 예제와 같이 각각 부여해도 원하는 기능을 구현할순 있지만, 저얼~~~때 좋은 방법은 아니다. //엘리먼트 각각의 이벤트 설정 그러면 각각의 엘리먼트에 이벤트를 할당하지 않고, 어떻게 여러개의 버튼을 한개의 이벤트 내에 할당할수 있을까? 바로 아래 예제와 같이 부모엘리먼트에 이벤트를 할당하는 것이다. //부모 엘리먼트를 통한 이벤트 할당 아래 그림을 보면, 버튼이라는 엘리먼트를 감싸고 있는 부모 엘리먼트를 그림으로 만들어 보았다. 즉, 사용자가 버튼을 클릭시, button-> li -> ul -> section -> body -> html 순으로 이.. 2021. 1. 31.
[Javascript] Wrapping Class (래핑 클래스) 자바스크립트에서는 변수 선언을 할때 자료형을 지정하지 않는다. 왜냐하면 자바스크립트에서는 모든 변수가 참조형이기 때문이다. var num1 = 10; var num2 = new Number(10); 위 예제에서 num1과 num2는 선언 방법이 다를뿐 같은 데이터를 초기화 하고있다. 즉, 10이라는 데이터의 공간을 만들고, 10이라는 데이터의 공간의 이름을 num1이라고 부르는 것이다. var str1 = '문자열'; var str2 = new String('문자열'); 마찬가지로 str1 과 str2 또한 같은 문자열 데이터를 초기화 하고 있다. 아래와 같이 함수도 가능하긴 하지만, 잘 사용하지는 않는다. var sum1 = function(a,b){ return a+b; }; var sum2 = ne.. 2021. 1. 29.
728x90

티스토리툴바