1. inline
1)
<title>인라인 이벤트 처리</title>
</head>
<body>
<!-- onclick : 이벤트 속성, "location.href='https://www.naver.com'" : 이벤트 핸들러 -->
<input type="button" value="이동" onclick="location.href='https://www.naver.com'">
<input type="button" value="확인" onclick="alert('클릭');alert('click');">
</body>
</html>2)
<title>인라인 이벤트 처리 - 함수 이용</title>
<style type="text/css">
div#header{
background-color:orange;
}
</style>
<script type="text/javascript">
function whenClick(){
alert('CLICK');
}
</script>
</head>
<body>
<div id="header" onclick="whenClick()">클릭</div>
</body>
</html>2. click
1)
<title>click 이벤트</title>
<script type="text/javascript">
function changeColor(color){
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<input type="radio" name="color" value="blue" onclick="changeColor('lightblue')">파란색
<input type="radio" name="color" value="green" onclick="changeColor('lightgreen')">녹색
<input type="radio" name="color" value="white" onclick="changeColor('white')">흰색
</body>
</html>2)
<title>click 이벤트</title>
<script type="text/javascript">
//윈도우가 로드될 때 호출
window.onload=function(){
let notice = document.getElementById('yumu');
let radios = document.getElementsByTagName('input');
for(let i=0;i<radios.length;i++){
//이벤트 연결
radios[i].onclick=function(){
if(radios[0].checked){ //첫번째 radio 선택
//div 숨기기
notice.style.display = 'none';
}else{ //두번째 radio 선택
//div 표시하기
notice.style.display = '';
}
};
}
};
</script>
</head>
<body>
<form>
<input type="radio" name="price" checked value="0">무료
<input type="radio" name="price" value="1">유료
</form>
<div id="yumu" style="display:none;">
유료회원 가입비는 10,000원 입니다.
</div>
</body>
</html>3. mouseover
1)
<title>mouseover, mouseout 이벤트</title>
<style type="text/css">
a{
color:white;
text-decoration:none;
}
td{
width:100px;
margin-top:10px;
text-align:center;
background-color:#FF8888;
}
</style>
<script type="text/javascript">
function changeBgColor(cell,newColor){
//이벤트가 발생한 태그의 이벤트 속성 제어
cell.style.backgroundColor = newColor;
}
</script>
</head>
<body>
<table>
<tr>
<!-- this는 이벤트가 발생한 태그(td태그)를 의미함 -->
<td onmouseover="changeBgColor(this,'#FF0000')" onmouseout="changeBgColor(this,'#FF8888')">
<a href="#">menu01</a>
</td>
</tr>
<tr>
<td onmouseover="changeBgColor(this,'#FF0000')" onmouseout="changeBgColor(this,'#FF8888')">
<a href="#">menu02</a>
</td>
</tr>
<tr>
<td onmouseover="changeBgColor(this,'#FF0000')" onmouseout="changeBgColor(this,'#FF8888')">
<a href="#">menu03</a>
</td>
</tr>
</table>
</body>
</html>2)
<title>mouseover,mouseout 이벤트</title>
<script type="text/javascript">
window.onload=function(){
let alink = document.getElementsByTagName('a');
let bigImg = document.getElementById('bigImg');
for(let i=0;i<alink.length;i++){
//이벤트 연결
alink[i].onmouseover=function(){
//img 태그 표시하기
bigImg.style.display = '';
//큰 이미지 읽기
bigImg.src = this.href; //이벤트가 발생한 태그의(=a태그) href 속성값(큰 이미지 경로) 반환
bigImg.width = 500;
bitImg.height = 350;
};
alink[i].onmouseout=function(){
//img 태그 숨기기
bigImg.style.display = "none";
};
alink[i].onclick=function(){
//a태그의 링크 기능(기본 이벤트) 제거
return false;
};
}
};
</script>
</head>
<body>
<div>
<a href="../files/Penguins.jpg"><img src="../files/Penguins.jpg" width="83" height="83" alt="작은 펭귄 이미지"></a>
<a href="../files/Koala.jpg"><img src="../files/Koala.jpg" width="83" height="83" alt="작은 코알라 이미지"></a>
</div>
<div>
<img id="bigImg" style="display:none;">
</div>
</body>
</html>4. change
<title>change 이벤트</title>
<script type="text/javascript">
function trans(){
let x = document.getElementById('word');
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
영어단어 : <input type="text" id="word" onchange="trans()">
<p>입력 필드를 벗어나면 대문자로 변경됩니다.</p>
</body>
</html>5. submit
<title>submit 이벤트</title>
<script type="text/javascript">
function check(){
if(document.member.id.value==''){
alert('id를 입력하세요');
document.member.id.focus();
return false; //submit이 안되게 함
}
if(document.member.password.value==''){
alert('비밀번호를 입력하세요');
document.member.password.focus();
return false;
}
if(document.member.name.value==''){
alert('이름을 입력하세요');
document.member.name.focus();
return false;
}
}
</script>
</head>
<body>
<!-- return을 표기하지 않으면 false를 받을 수 없음 -->
<form name="member" action="a.jsp" method="post" onsubmit="return check()">
id <input type="text" name="id"><br>
비밀번호 <input type="password" name="password"><br>
이름 <input type="text" name="name"><br>
<input type="submit" value="확인">
</form>
</body>
</html>6. script
1)
<title>스크립트에서 이벤트 연결</title>
<style type="text/css">
div{
background-color:yellow;
}
</style>
<script type="text/javascript">
//윈도우가 로드될 때 호출
window.onload=function(){
let header = document.getElementById('header');
//이벤트 핸들러 정의
function whenClick(){
alert('CLICK');
}
//이벤트 연결
// 이벤트 속성 이벤트 핸들러
header.onclick = whenClick;
//페이지 실행시 한 번 실행 후 이벤트 연결을 하지 못함
//header.onclick = whenClick();
};
</script>
</head>
<body>
<div id="header">클릭</div>
</body>
</html>2)
<title>스크립트에서 이벤트 연결</title>
<style type="text/css">
div{
background-color:yellow;
}
</style>
<script type="text/javascript">
//윈도우가 로드될 때 호출
window.onload=function(){
let header = document.getElementById('header');
//이벤트 연결
//이벤트 속성 = 이벤트 핸들러(익명함수)
header.onclick=function(){
alert('클릭');
};
}
</script>
</head>
<body>
<div id="header">클릭</div>
</body>
</html>