🎬 이미지 넘기기
이벤트 속성인 onclick 을 사용하여 클릭하였을때 이벤트를 발생시켜
img1, im2, im3 ... img7 까지의 사진을 '이전' 버튼과 '다음' 버튼으로 변화를 확인
<title>갤러리</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#galleryWrap{
width:520px;
margin:0 auto;
text-align:center;
}
#galleryWrap img{
vertical-align:middle;
}
img#prev,img#next{
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
let num=1;
let gallery = document.getElementById('gallery');
//id가 prev인 img태그에 이벤트 연결
document.getElementById('prev').onclick=function(){
//img1 -> img7 ---> img1
num--;
if(num<1) num=7;
gallery.src = '../images/img' + num + '.jpg';
};
//id가 next인 img태그에 이벤트 연결
document.getElementById('next').onclick=function(){
//img1 ---> img7 -> img1
num++;
if(num>7) num=1;
gallery.src = '../images/img' + num + '.jpg';
};
};
</script>
</head>
<body>
<div id="galleryWrap">
<h1>이미지 넘기기</h1>
<p>
<img src="../images/left_btn.png" alt="이전 그림 보기"
id="prev">
<img src="../images/img1.jpg" alt="갤러리 그림"
id="gallery">
<img src="../images/right_btn.png" alt="다음 그림 보기"
id="next">
</p>
</div>
</body>
🎆 기본 이벤트
일부 HTML 태그는 이미 이벤트 핸들러 가지고 있는데 이벤트가 발생할 때 이벤트 연결 없이 사용할 수 있는 이벤트
기본 이벤트가 있는 HTML 태그에 이벤트 연결을 하면 이벤트 연결에 의해 새롭게 호출되는 이벤트 핸들러와 기본 이벤트에 의해 고유의 이벤트 핸들러가 함께 호출되기 때문에 원하는 형태의 이벤트 처리가 어려워짐. 따라서 기본 이벤트를 제거함으로써 원한느 이벤트 연결이 가능하게 처리해야 함!
<script type="text/javascript">
/*
이벤트 전달
자식 노드에서 부모 노드 순으로 이벤트를 실행
div
|
div ^ 자식 노드에서 부모 노드로 이벤트 전파
| |
p |
| |
span 이벤트 발생
*/
window.onload=function(){
//이벤트 연결
document.getElementById('header').onclick=function(){
alert('header');
this.style.backgroundColor='pink';
};
document.getElementById('para').onclick=function(event){
alert('para');
this.style.backgroundColor='yellow';
};
};
</script>
</head>
<body>
<h1 id="header">header
<p id="para">Paragraph</p>
</h1>
</body>
Paragraph 를 먼저 누르면 header 로 같이 변화한다 !
(자식 노드에서 부모 노드로 이벤트 전파)
🎇 기본 이벤트 제거
이벤트 전파를 막기위해서 이벤트 속성에 연결된 이벤트 핸들러의 매개변수에 event 객체를 전달받아서 stopPropagation() 메서드를 실행하면 이벤트 전파를막을 수 있음
<script type="text/javascript">
/*
이벤트 전달
자식 노드에서 부모 노드 순으로 이벤트를 실행
div
|
div ^ 자식 노드에서 부모 노드로 이벤트 전파
| |
p |
| |
span 이벤트 발생
*/
window.onload=function(){
//이벤트 연결
document.getElementById('header').onclick=function(){
alert('header');
this.style.backgroundColor='pink';
};
document.getElementById('para').onclick=function(event){
alert('para');
this.style.backgroundColor='yellow';
//이벤트 전파 막기
//event.stopPropagation();
};
};
</script>
</head>
<body>
<h1 id="header">header
<p id="para">Paragraph</p>
</h1>
</body>
한다 열심히