[Javascript] 이벤트리스너, JQuery함수

이벤트리스너

getElementsByClassName('클래스이름')[0]

: 중복되는 class중 0번째 반환

addEventListener

target.addEventListner(event, function(){
 실행할코드
});

target: 이벤트 핸들러 추가하려는 HTML 요소

event: 이벤트의 이름을 지정하는 문자열

mouseover : 셀렉터로 찾은 요소에 마우스 올리면 특정 코드 실행

scroll : 셀렉터로 찾은 요소가 스크롤되면 특정 코드 실행

keydown : 셀렉터로 찾은 요소에 키보드로 글자 입력하면 특정 코드 실행

function: 이벤트 감지 시 실행할 함수 지정 → 웹페이지 동적으로 변경가능

🔅querySelector() → 맨 위에 나오는 하나의 요소만 선택

document.querySelector('.test1').innerHTML = '안녕';

.test 클래스 선택

document.querySelector('#test2').innerHTML = '안녕';

#test2 아이디 선

removeEventListener

target.removeEventListner(event, function, useCapture);

🔅querySelectorAll() → 인덱스로 맨 위에 있는 요소가 아니어도 찾을 수 있음

document.querySelectorAll('.test1')[1].innerHTML = '안녕';

JQuery

querySelector = $

addEventListner = on

1. 함수명 짧게 2. 여러 줄의 유사한 html을 변경하고 싶을 때 효율적!

document.querySelector('.narbar-toggler').addEventListener('click', function(){
	document.querySelectorAll('.list-group')[0].classList.toggle('show');
})

🔽

$('.narbar-toggler').on('click', function(){
	document.querySelector('.list-group')[0].classList.toggle('show');
})