js+jq

by qwerew0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div id="wrap">
<h1>이벤트 연습</h1>
<p id="textZone">웹 브라우저에서 버튼을 클릭한다거나 mouse를 움직이거나 하는 모든 행위를 ‘이벤트’라고 합니다. 그리고 이벤트발생 시 함수의 실행문이 수행되도록 이벤트를 지정하는 것을 이벤트 핸들러라고 합니다.
</p>
<h2>click 메서드</h2>
<p><button id="btn1">click</button> </p>
<h2>mouseover 메서드</h2>
<p><button id="btn2" tabindex="1">mouseover</button> </p>
<h2>bind 메서드</h2>
<p><button id="btn3">bind</button> </p>
<h2>mouseleave 메서드</h2>
<div id="listWrap">
 <h3>관련 사이트</h3>
 <ul class="list1">
  <li><a href="#">list1</a></li>
  <li><a href="#">list2</a></li>
  <li><a href="#">list3</a></li>
  <li><a href="#">list3</a></li>
 </ul>
</div>
<h2>hover 메서드</h2>
<h3><a href="#" class="hover">hover</a></h3>
</div>

CSS

* { margin:0; padding:0; } li{ list-style-type:none; }
body { font:12px/1.5 "굴림",Gulim; margin:10px; }
h2{margin-top:30px;}
a{color:#333;}
#textZone{width:700px;}
#listWrap{background:#cfcfcf;width:110px;padding:10px;}
.list1{display:none;}

JavaScript

const textZone = $('#textZone');
//1. id="btn1" 클릭 했을때 id="textZone" 글자 색상을 파란색으로 변경
const btn1 = $('#btn1');
btn1.click ( function () {
		textZone.css('color', 'blue');
})
//2. id="btn2"에 마우스 오버 했을때 id="textZone" 배경 색상을 노란색으로 변경
const btn2 = $('#btn2');
btn2.mouseover( function () {
		textZone.css('backgroundColor', 'yellow');
});
//3. id="btn2"에 포커스가 생겼을때 id="textZone" 배경 색상을 노란색으로 변경
//키보드 tab키가 #btn2에 머물때 노란색으로 변경
btn2.focus( function () {
	textZone.css('backgroundColor', 'yellow');
});
/*4. 두개이상의 이벤트(mouseover,click,focus)를 등록시킬때 */
const btn3 = $('#btn3');
function textZone4() {
		textZone.css('color' ,'green');
		textZone.css('fontWeight', 'bold')
}
btn3.on({'mouseover focus':function(){textZone4()},'click': function(){alert();textZone.css('margin-left',"80px");} })


//5. id="listWrap"에 마우스가 올라가 있으면 class="list1" 을 블록요소 변경합니다. mouseover와 비슷
const listWrap = $('#listWrap');
const list1 = $('.list1');
listWrap.mouseenter( function () {
		list1.css('display', 'block');
})
//6. id="listWrap"에서 마우스가 벗어나면 class="list1" 을 블록요소 변경합니다. mouseout과 비슷
listWrap.mouseleave( function () {
		list1.css('display', 'none');
})
//8. class="hover"인 요소에 마우스를 올렸을땐 함수1을 벗어났을때에는 함수2를 실행 합니다.
$('.hover').hover(function(){	$(this).css("color","aqua");},function(){$(this).css("color","red") });