반응형
* 이벤트
: 각 요소와의 상호작용을 가능하게함으로써 웹페이지를 능동적으로 작동하도록 한다.
이벤트 2가지 방법
1. 요소.onclick=function( ){ };
2. 요소.addEventListener("이벤트 명", function( ){ }); =>자바스크립트에서 권장
<click 이벤트를 예로 들기로 하자>
1. 요소.onclick=function( ){ };
2. 요소.addEventListener("이벤트 명", function( ){ });
↓ 출력화면
↓같은 내용으로 방법 1를 통해 적용했을 때 역시 결과값은 같다.↓
↓ 출력화면
* id를 요소로 잡는 방법
->getElementById(" ");
* class를 요소로 잡는 방법
1. document.getElementByClassName(" ");
2. document.getElementByTagName(" ");
* id, class, 복수 class 등 요소로 잡는 방법
querySelectorAll(".box>.a1") ->대신 id는 (#), class는 (.)을 붙여서 써줘야 한다.
* 요소에 속성값 적용하는 방법
1. 문서 내에서 요소 찾아주기
2. 요소.style.속성="값";
↓ 출력화면
→이어 자바스크립트 반복함수 setTimeout, setInterval, clearInterval 간단 예제 및 정리!
반응형
'컴퓨터 코딩 > javascript' 카테고리의 다른 글
자바스크립트 switch문 예제 및 간단 정리!(switch,case,break,default) (0) | 2020.10.03 |
---|---|
자바스크립트 반복함수 setTimeout, setInterval, clearInterval 간단 예제 및 정리! (0) | 2020.10.03 |
자바스크립트 return의 역할 및 클로저 간단 정리(예제) (0) | 2020.09.29 |
자바스크립트 객체 종류와 사용자 정의 객체 정리 및 이해하기! (0) | 2020.09.28 |
자바스크립트 함수-호이스팅,렉시컬 스코프 예제를 통해 이해하기! (0) | 2020.09.27 |