Javascript event

이벤트 처리

 

• 사용자에 의해 감지되고 처리될 수 있는 동작이나 사건
• 키보드나 마우스 동작처럼 브라우저에서 발생하는 사건(순간)들
• 사용자가 발생시킬 수도 있고 응용프로그램이 발생시킬 수도 있음
• 이벤트 => click / dbclick / mouseover / load ...
• 이벤트핸들러 => onclock / ondbclick / onmouseover / onload ....

이벤트 종류

 

마우스 이벤트

 

• 키보드 이벤트
• 프레임 이벤트
• 프레임 이벤트
• 폼 이벤트
• 드래그 이벤트
• 클립보드 이벤트
• 프린트 이벤트
• 미디어 이벤트

- 요소에 이벤트를 바인딩하는 세가지 방법

 

1. html 이벤트 핸들러

• function 함수명 (){//처리코드;}
•  < 태그 이벤트핸들러='함수();' >

function start(){
    var img1 = document.getElementById('img1');
    var cnt=1;
    var des='';

    function change(){
        //cnt=Math.floor(Math.random()*4)+1;  // 1~4
        cnt++;  // 1 2 3 4 
        if(cnt==5){
            cnt=1;
        }

        if(cnt==1){
            des = '이미지1 설명';
        }else if(cnt==2){
            des = '이미지2 설명';
        }else if(cnt==3){
            des = '이미지3 설명';
        }else if(cnt==4){
            des = '이미지4 설명';
        }

        img1.src='./gallery/images/img'+ cnt +'.jpg';
        img1.alt=des;
    }
    setInterval(change , 3000);
}
//JS
<h3>5초마다 자동으로 바뀌는 이미지 광고(랜덤)-4컷</h3>
<div>
    <img id="img1" src="./gallery/images/img1.jpg" alt="이미지 설명1">
</div>
<button onclick="start();">start</button>
//HTML

토글 알고리즘

ex)

1.홀짝

        var cnt = 0;
        var img1 = document.getElementById('img1');
        var btn = document.getElementById('btn');
        

        function start(){
            cnt++;    
            if(cnt%2==1){
                // img1.style.borderRadius = '50px';
                // img1.style.boxShadow = '5px 5px 5px 0 rgba(0,0,0,.2)';
                // img1.style.opacity ='1';
                // img1.style.left = 0;
                img1.className = 'img2';
                btn.innerHTML = 'stop';
            }else{
                // img1.style.borderRadius = '';
                // img1.style.boxShadow = '';
                // img1.style.opacity = 0;
                // img1.style.left = '600px';
                img1.className ='img1';
                btn.innerHTML = 'start';
            }
        }

2.가정법

var sp = false; // 가정법 flase(start) true(stop)
var img1 = document.getElementById('img1');
var btn = document.getElementById('btn');


function start(){

    if(sp == false){

        img1.className = 'img2';
        btn.innerHTML = 'stop';
        sp = true;
    }else{

        img1.className ='img1';
        btn.innerHTML = 'start';
        sp = false;
    }
}

3. 가정법 이용 아코디언 메뉴

<style>
    ul{
        list-style: none;
    }
    ul li p:last-child{
        height:0;
        background: orange;
        opacity: 0;
        transition: all .3s ease-out;
    }
    ul li .answ:last-child{
        height:100px;
        opacity: 1;
    }
</style>

<h2>아코디언 메뉴</h2>
<div class="box">
    <ul>
        <li>
            <p><a href="#" id="btn" onclick="start();">안국남씨는 지금 무엇을 하고 계실까요? ▼</a></p>
            <p id="answer">안국남씨는 약먹구 자구</p>
        </li>
    </ul>
    <!-- <button id="btn" type="button" onclick="start();">start</button> -->
</div>

<script>
    var sp = false; // 가정법 flase(닫혔을때) true(열렸을때)
    var answer = document.getElementById('answer');
    var btn = document.getElementById('btn');


    function start(){

        if(sp == false){
            answer.className = 'answ';
            btn.innerHTML = '안국남씨는 지금 무엇을 하고 계실까요? ▲';
            sp = true;

        }else{
            answer.className = '';
            btn.innerHTML = '안국남씨는 지금 무엇을 하고 계실까요? ▼';
            sp = false;
        }
    }

4.form 태그를 이용해 로그인 창 만들기

    <div id="page">
        <h1>List King</h1>
        <h2>New Account</h2>
        <form method="post" action="">
  
          <label for="username">Create a username: </label>
          <input type="text" id="username" onblur="checkUsername()" />
          <div id="feedback"></div>
  
          <label for="password">Create a password: </label>
          <input type="password" id="password" />
  
          <input type="submit" value="sign up!" />
  
        </form>
    </div>


    <script>
        function checkUsername(){
            var elMsg = document.getElementById('feedback');
            var elUsername = document.getElementById('username');

            if(elUsername.value.length < 5){
                elMsg.textContent = 'Username must be 5 characters or more';
            }else{
                elMsg.textContent='';
            }
        }
    </script>

2.DOM 이벤트 핸들러

이벤트 제거

1.객체.이벤트핸들러 = null;

2.return false;

객체.이벤트핸들러 = function(){
	//처리코드;
}

function 함수명 (){
	//처리코드;
}
객체.이벤트핸들러 = 함수명;

회원가입 예시

<form id="form" action="a.php" method="post">
    <p>아이디 <input id="id" type="text" /></p>
    <p>비밀번호 <input id="password" type="password" /></p>
    <p>비밀번호 확인 <input id="password-check" type="password" /></p>
    <p><input id="Submit1" type="submit" value="제출" /></p>
</form>

<script>
   var form = document.getElementById('form');
   var password = document.getElementById('password');
   var check = document.getElementById('password-check');

   form.onsubmit = function(){
    if(password.value == check.value){
        alert('확인되었습니다.')
    } else{
        alert('비밀번호를 다시 입력해주세요');

       return false; //false 값을 return하면 이벤트가 제거되어 처리되지 않는다.
    }
   }
</script>

DOM 이벤트 리스너

• W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델
• 한 번에 여러 개의 이벤트 리스너 추가
• 이벤트 전달 방식 중 이벤트 캡처링 지원
• IE 9 버전부터 지원

* 객체.addEventListener('이벤트','functionName',false);    세번째 인수값 false는 생략 가능

매개변수가 없는 함수 호출

<input id="button" type="button" value="이벤트" />
<h5 id="heading">좋은 날</h5>


<script>
    var button = document.getElementById('button');
    var heading = document.getElementById('heading');

    function whenClick1(){
        heading.innerHTML ='행';
    }
    function whenClick2(){
        heading.style.color = 'blue';
    }

    button.addEventListener('click',whenClick1);
    button.addEventListener('click',whenClick2);

    // button.removeEventListener('click',whenClick2)

매개변수가 존재하는 함수 호출법

    <input id="button" type="button" value="이벤트" />
    <h5 id="heading">좋은 날</h5>


    <script>
        var button = document.getElementById('button');
        var heading = document.getElementById('heading');

        function whenClick1(a){
            heading.innerHTML = a;
        }
        function whenClick2(b){
            heading.style.color = b;
        }

        button.addEventListener('click', function(){whenClick1('우울한날')});
        button.addEventListener('click', function(){whenClick2('#ccc')});

        // button.removeEventListener('click',whenClick2)
    </script>

회원가입 예시 addEventListener 변경

<div id="page">
    <h1>List King</h1>
    <h2>New Account</h2>
    <form method="post" action="">

      <label for="username">Create a username: </label>
      <input type="text" id="username"/>
      <div id="feedback"></div>

      <label for="password">Create a password: </label>
      <input type="password" id="password" />

      <input type="submit" value="sign up!" />

    </form>
  </div>


<script>
function checkUsername() {                             
var elMsg = document.getElementById('feedback');    
if (this.value.length < 5) {                         
elMsg.textContent = 'Username must be 5 characters or more'; 
} else {                                            
elMsg.textContent = '';                            
}
}

var elUsername = document.getElementById('username');  
elUsername.addEventListener('blur', checkUsername, false);      
</script>

객체.preventDefault();  => a 태그를 눌러도 페이지 이동을 하지 않게 하는경우

    var tab1 = document.getElementById('tab1');

    tab1.onclick = function(e){
        e.preventDefault();
    }

 

자바스크립트 기업형 사이트 자바스크립트 활용문

팝업창 호출하기

   <div id="content">
     <a href="#" onclick="openLayer('layerPop1',100,100);"><img style="cursor:pointer;" src="images/a1.jpg" alt="확대이미지" /></a>
     <a href="#" onclick="openLayer('layerPop2',100,100)"><img style="cursor:pointer;" src="images/b1.jpg" alt="확대이미지" /></a>
   </div>
   
    <div id="layerPop1" style="position:absolute;width:514px; height:345px; display:none;">
      <a href="#" class="close" onclick="closeLayer('layerPop1');"><img style="cursor:pointer;" src="images/a2.jpg"  /></a>
    </div>
    
    <div id="layerPop2" style="position:absolute;width:611px; height:400px; display:none;">
      <a href="#" class="close" onclick="closeLayer('layerPop2')"><img style="cursor:pointer;" src="images/b2.jpg"  /></a>
    </div>

    <script>
        var cnt = 0; // popup 창에 하나도 안떠있다면 0 , 하나가 떠있다면 1
        function openLayer(idname, tpos, lpos){
          if(cnt==0){
            cnt = 1;
            var pop = document.getElementById(idname);
            pop.style.display = 'block';
            pop.style.top = tpos + 'px';
            pop.style.left = lpos + 'px';
        }
      }
      function closeLayer(idname){
          var pop = document.getElementById(idname);
          pop.style.display = 'none';
          cnt = 0;
      }
    </script>

지도 서브 탭 메뉴

<style>
    a{text-decoration: none; color:#333;}
    *{margin:0; padding:0}
    .tab ul{list-style: none; overflow: hidden;}
    .tab li{float:left; margin-right:30px; width:150px;}
    .tab a{display: block; padding:20px 0; text-align: center; font-size: 20px;}
    .tab .tabcontent{margin-top: 20px;}
    .tab .tabcontent div{width:600px; height:200px; background: #fa0; display: none;}
    .current{background: #fa0; color:#fff;}
</style>
   
   <div class="tab">
        <ul>
            <li><a id="tab1" href="#">tab1</a></li>
            <li><a id="tab2" href="#">tab2</a></li>
            <li><a id="tab3" href="#">tab3</a></li>
        </ul>
        <div class="tabcontent">
            <div id="con1">탭1내용</div>
            <div id="con2">탭2내용</div>
            <div id="con3">탭3내용</div>
        </div>
    </div>

<script>
    var tab1 = document.getElementById('tab1');
    var tab2 = document.getElementById('tab2');
    var tab3 = document.getElementById('tab3');

    var con1 = document.getElementById('con1');
    var con2 = document.getElementById('con2');
    var con3 = document.getElementById('con3');


    
    tab1.onclick = function(e){
        e.preventDefault();

        this.className = 'current';
        tab2.className = '';
        tab3.className = '';

        con1.style.display = 'block';
        con2.style.display = 'none';
        con3.style.display = 'none';
        
    }
    tab2.onclick = function(e){
        e.preventDefault();

        tab1.className = '';
        this.className = 'current';
        tab3.className = '';

        con1.style.display = 'none';
        con2.style.display = 'block';
        con3.style.display = 'none';
        
    }
    tab3.onclick = function(e){
        e.preventDefault();

        tab1.className = '';
        tab2.className = '';
        this.className = 'current';

        con1.style.display = 'none';
        con2.style.display = 'none';
        con3.style.display = 'block';
        
    }

갤러리 제작

1. 통 이미지

    <style>
        *{margin:0; padding:0;}
        img{border:0;}
        .gallery{width:400px; padding:10px; overflow:hidden; border:2px solid #CCC;}
        .gallery ul{list-style:none; margin-top:10px;}
        .gallery ul li{float:left;}
        .gallery ul li img{ cursor:pointer;}
      </style>
</head>
<body>
    <div class="gallery">
        <img id="image" src="images/img1.jpg" alt="단풍이미지" />
        <ul>
           <li><a href="#" id="img1"><img src="images/img1.jpg" width="100" height="80" alt="단풍이미지1"></a></li>
           <li><a href="#" id="img2"><img src="images/img2.jpg" width="100" height="80" alt="단풍이미지2"></a></li>
           <li><a href="#" id="img3"><img src="images/img3.jpg" width="100" height="80" alt="단풍이미지3"></a></li>
           <li><a href="#" id="img4"><img src="images/img4.jpg" width="100" height="80" alt="단풍이미지4"></a></li>
        </ul>
     </div>

     <script>

        var image = document.getElementById('image');

        var img1 = document.getElementById('img1');
        var img2 = document.getElementById('img2');
        var img3 = document.getElementById('img3');
        var img4 = document.getElementById('img4');

        img1.onclick = function(){
            image.src = "images/img1.jpg";
        }
        img2.onclick = function(){
            image.src = "images/img2.jpg";
        }
        img3.onclick = function(){
            image.src = "images/img3.jpg";
        }
        img4.onclick = function(){
            image.src = "images/img4.jpg";
        }
     </script>

2. 백그라운드 이미지

<style>
  *{margin:0; padding:0;}
  img{border:0;}
  .gallery{width:400px; padding:10px; overflow:hidden; border:2px solid #CCC;}
  .gallery #image{width:400px; height:300px; background:url(images/img1.jpg) 0 0 no-repeat;}
  .gallery ul{list-style:none; margin-top:10px;}
  .gallery ul li{float:left;}
  .gallery ul li img{ cursor:pointer;}
</style>

<body>
    <div class="gallery">
        <div id="image"></div>
        <ul>
           <li><a href="#" id="img1"><img src="images/img1.jpg" width="100" height="80" alt="단풍이미지1"></a></li>
           <li><a href="#" id="img2"><img src="images/img2.jpg" width="100" height="80" alt="단풍이미지2"></a></li>
           <li><a href="#" id="img3"><img src="images/img3.jpg" width="100" height="80" alt="단풍이미지3"></a></li>
           <li><a href="#" id="img4"><img src="images/img4.jpg" width="100" height="80" alt="단풍이미지4"></a></li>
        </ul>
    
    <script>
        var image = document.getElementById('image');

        var img1 = document.getElementById('img1');
        var img2 = document.getElementById('img2');
        var img3 = document.getElementById('img3');
        var img4 = document.getElementById('img4');

        img1.onclick = function(){
            image.style.background = 'url(images/img1.jpg)';
        }
        img2.onclick = function(){
            image.style.background = 'url(images/img2.jpg)';
        }
        img3.onclick = function(){
            image.style.background = 'url(images/img3.jpg)';
        }
        img4.onclick = function(){
            image.style.background = 'url(images/img4.jpg)';
        }
    </script>

3. 백그라운드 이미지 html 에서 함수호출하기

<style>

  *{margin:0; padding:0;}
  img{border:0;}
  .gallery{width:400px; padding:10px; overflow:hidden; border:2px solid #CCC;}
  .gallery #image{width:400px; height:300px; background:url(images/img1.jpg) 0 0 no-repeat;}
  .gallery ul{list-style:none; margin-top:10px;}
  .gallery ul li{float:left;}
  .gallery ul li img{ cursor:pointer;}

</style>

<body>
<div class="gallery">
    <div id="image"></div>
    <ul>
        <li><a href="#" id="img1" onclick="changeGallery(1);"><img src="images/img1.jpg" width="100" height="80" alt="단풍이미지1"></a></li>
        <li><a href="#" id="img2" onclick="changeGallery(2);"><img src="images/img2.jpg" width="100" height="80" alt="단풍이미지2"></a></li>
        <li><a href="#" id="img3" onclick="changeGallery(3);"><img src="images/img3.jpg" width="100" height="80" alt="단풍이미지3"></a></li>
        <li><a href="#" id="img4" onclick="changeGallery(4);"><img src="images/img4.jpg" width="100" height="80" alt="단풍이미지4"></a></li>
        </ul>
    </div>
<script>
    function changeGallery(count){
        
        var image = document.getElementById('image');
        image.style.background = 'url(images/img'+ count +'.jpg';

        image.onclick = this;
    }
</script>