자바스크립트로 이벤트 연결하기

클릭 이벤트 연결하기

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.

• .addEventListener() 문은 요소명.addEventListener("이벤트명" , (전달될 값) =>{실행할 구문}); 으로 사용
• js에 있는 1번 같은 경우에는 콘솔에 찍히기도 전에 네이버로 이동
• js에 있는 2번 같은 경우에는 네이버로 이동을 막고 콘솔에 내용이 찍힘
  • e.prventDefault() 문은 이벤트의 기본 기능을 실행 X

 

호버 이벤트 연결하기

See the Pen 호버이벤트 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

• 코드 블록 내부에 전달되는 값이 1개이면 괄호를 생략 가능  (e)=> 이걸 e=>로 써도 됨

 

반복되는 요소 이벤트 한꺼번에 연결하기

See the Pen 반복되는요소 이벤트 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

1. querySelectorAll() 문을 이용하여 리스트를 그룹으로 만들어 list란 변수에 저장
2. for of 문을 이용해 list 그룹을 반복하면서 이벤트와 연결
3. el 변수에 저장되고 있는 요소를 클릭할때마다 해당 요소를 e.currentTarget 로 선택
4. innerText 구문으로 선택한 요소의 텍스트를 불러옴

 

클릭 이벤트가 발생할 때 숫자를 증가,감소하기

See the Pen 클릭이벤트 증가감소 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

1. 각가의 버튼을 변수에 담고  let num 에 초기값 0을 저장
   • let을 사용하는 이유는 변수에 재할당이 가능하다
2. btnPlus에 클릭 이벤트를 연결한후 이벤트 연결문 안쪽에 num++(num을 1씩 증가) 입력
   • 만약 2씩 증가 시키고 싶다면 num+=2 이렇게 작성
3. btnMinus에 클릭 이벤트를 연결한후 이벤트 연결문 안쪽에 num--(num을 1씩 감소)입력
   • 만약 4씩 감소 시키고 싶다면 num -=4 이렇게 작성
4. btnReset에 클릭 이벤트를 연결한후 이벤트 연결문 안쪽에 num 을 0으로  입력
5. 각 버튼을 클릭하면 콘솔에 num값이 찍힘

 

문자 안에 변수 삽입하기

• 첫번째  경우는 myName 에 저장되어 있는 이순신이 출력되는것이 아닌 변수명이 출력
• 두번쨰  경우는 ``으로 감싸고 ${변수} 로 묶어서 변수값을 출력
  • 백틱(`)은 작은따옴표와 비슷해보이지만 키보드 상단 숫자 1 앞에 있는 `이다

 

클릭하면 좌우로 회전하는 박스 만들기

 

See the Pen 좌우 회전박스 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

1. btnLeft, btnRight 변수에 각 버튼를 저장하고 클릭 이벤트 연결
2.  버튼를 클릭하면 초기화한 num2 변수값을 1씩 증가,감소하여 deg와 곱함
3. rotate() 속성값에 #{num2 * deg} 연산식을 활용하요 45도씩 회전
   • rotate() 는 회전