[JavaScript]이벤트 관련 함수

Dawon Ruby Choi·2023년 10월 31일

addEventListener : 이벤트 등록 함수

기본 문법

const title = document.querySelector("h1"); 
 
title.addEventListener("이벤트종류", 함수이름)

예시

window.onload = () =>{
			//사원 전체 보기를 누르면 분홍색 div만 보이게, 사원 등록하기를 누르면 초록색 div만 보이게
			const pink = document.getElementById("pink");
			const green = document.getElementById("green");
			
			const total = document.getElementById("total");
			const enroll = document.getElementById("enroll");
			
			total.addEventListener('click',()=>{
				pink.style.display = 'block';
				green.style.display = 'none';
			})
			
			enroll.addEventListener('click',()=>{
				green.style.display = 'block';
				pink.style.display = 'none';
			})
		}

마우스 올리면 색깔 변경(레드/블루)

window.onload = () =>{
			const pink = document.getElementById("pink");
			const green = document.getElementById("green");pink.addEventListener('mouseenter', ()=>{
				pink.style.backgroundColor = 'red'; //마우스를 갖다 댔을 때 핑크가 
			})
			
			green.addEventListener('mouseenter', ()=>{
				green.style.backgroundColor = "blue";
			})					
			
profile
나의 코딩 다이어리🖥️👾✨

0개의 댓글