1. HTML 이벤트 핸들러 사용
추천하진 않는다.
2.이벤트 리스너를 등록하여 사용하기
※스크립트가 실행될때 문서가 모두 로드된후 실행되어야 하기때문에 태그 아래쪽에 스크립트를 추가해요.
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
[align] {
background-color: black;
color: white;
}
div[align="right"] {
background-color: green;
color: white;
}
</style>
</head>
<body>
<div align="left" id="one">
안녕하세요.
</div>
<button id ="target" type="button">누르기</button>
<div id ="two">
안녕하세요.
</div>
</body>
<script>
var one = document.getElementById('one');
var two1 = document.getElementById('two');
var t = document.getElementById('target');
one.addEventListener('click',function(){one.style.color='blue';},false );
one.addEventListener('mouseover',function(){one.style.background='yellow';},false );//마우스가 올라왔을때
one.addEventListener('mouseout',function(){one.style.background='#ff0000';},false );//마우스가 나갔을때
two1.addEventListener('mousedown',function(){one.style.background='0000ff';},false ); //마우스 다운업이 안되네
two1.addEventListener('mouseup',function(){one.style.background='000fff';},false );
two1.addEventListener('mouseover',function(){two1.innerHTML='마우스올라옴'},false );
two1.addEventListener('mouseout',function(){two1.innerHTML='마우스나감';},false );
//two1.addEventListener('click',function(){two1.style.color='red';},false);
//t.addEventListener('click', function(event){alert('Hello world, '+event.target.value);});
t.addEventListener('mousedown',function(){one.style.background='0000ff';},false ); //마우스 다운업이 안되네
t.addEventListener('mouseup',function(){one.style.background='000fff';},false );
</script>
</html>
'JAVASCRIPT 자바스크립트' 카테고리의 다른 글
| 자바스크립트 아코디언 accordion javascript (0) | 2020.05.12 |
|---|---|
| javascript scroll to top of page 자바스크립트 페이지 탑이동 (0) | 2020.05.12 |
| 자바스크립트 이벤트 종류 (0) | 2020.05.11 |
| 자바스크립트 window 객체 값 (0) | 2020.05.11 |
| 자바스크립트 document 문서 객체 모델 (0) | 2020.05.11 |
은호아빠
여행, 맛집, 일상, 프로그래밍, 개발자, 윈도우, 웹, jsp, spring, db, mysql, oracle, c#