<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN으로 jQuery 라이브러리 연결하기 - https://cdnjs.com/libraries/jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>jquery 이벤트 처리 방법</h1>
<h1 id="h">jquery 이벤트 처리 방법</h1>
<h1 id="a1">jquery 이벤트 처리 방법</h1>
<h1>jquery 이벤트 처리 방법</h1>
<input type="button" value="1234" />
<input type="button" value="ABCD" />
<input type="button" value="가나다라" />
<a href="https://www.naver.com" >기본 이벤트 해제</a>
<script>
$(function(){
//이벤트 종류
//onmouseover, mouseout, onmouseleave, onmouseenter
// onclick, onload, onchange, onfocus, onsubmit, onscroll, onresize,
// onkeydown, onkeyup, onkeypress, onkeyrelease
// ondbclick, onrest, onblur
// 이벤트 처리 방법 1.
/*
$('h1').click(function(){
//this : 방금 이벤트가 발생한 객체를 얻어옴
$(this).css("background", 'yellow');
$(this).append('*');
})
//------ 이벤트 처리 방법 2 ------
// 이벤트 종류
$('h1').on('click', function(){
$(this).css('color', 'red')
})
//------ 이벤트 처리 방법 3 -------
//mouseover: 배경색 그린, mouseout: 배경색 그레이
$('h1').on({mouseover:function(){
$(this).css('background', 'green')
}, mouseout: function(){
$(this).css('background', 'gray')
}})
//------ 이벤트 처리 방법 4 -------
//하나의 객체가 2가지의 이벤트를 같은 기능으로 처리할 때
$('input').on('click focus', function(){
$(this).val('이벤트가 발생함')
})
//-------이벤트 처리 방법5.-------
// 이벤트 종류, 선택자, 실행할 함수
$(document).on('click', '#h', function(){
$(this).css('color', 'orange')
}) */
//이벤트 처리 방법6
document.getElementsById("a1").addEventListener('click', function(){
$(this).css("background", 'pink')
})
})
</script>
</body>
</html>
풀스택eDot