이벤트 및 우클릭 방지

2017. 11. 28. 22:46

[ 이벤트(EVENT) ]

<!DOCTYPE html>

<input type="button" id="target2" value="button" />
    <script type="text/javascript">
      var t = document.getElementById("target2");
      t.onclick = function(event) {
        // event객체를 통해서 현재 발생한 이벤트에 대한
        // 다양한 정보를 얻을 수 있다.
        // event의 target속성을 통해 클릭한 객체를 가져올 수 있다.
        alert('Hello, ' + event.target.value);
        // 하지만, IE8 이하 버전에서는 인자로 event객체를 받지 않아 동작하지 않는다.
        console.dir(event); // .dir : 객체의 프러퍼티를 보기 쉽게 보여준다.
      }
      // 이를 해결하기 위해서는 다음과 같이 하면 된다.
      t.onclick = function(event) {
        // IE8이하에서는 첫번째 매개변수로 event를 받지 않아서 window에 있는 event객체
        // 를 통해 접근해야한다. 따라서

// event객체가 존재하면 쓰고, 없으면 window.event를 사용한다.
        var event = event || window.event;
        // 이때, window.event에서는 target속성이 없고, srcElement속성을 쓴다.
          // event.target 속성이 존재하면 쓰고, 없으면 event.srcElement속성을 쓴다.
        var target = event.target || event.srcElement;
        alert('Hello, ' + event.target.value);
      }
    </script>

// 하지만, addEventListener의 경우도 IE8이하의 버전에서는 동작하지 않는다.
      // -> IE8이하에서는 attachEvent를 사용해야한다.
      // 다음은 크로스 브라우징을 고려한 코드이다.

// EX)
      var t4 = document.getElementById('target4');
      var t5 = document.getElementById('target5');
      function btn_listener(event) {
        switch ( event.target.id ) {
          case 'target4' :
            alert(4);
            break;
          case 'target5' :
            alert(5);
            break;
        }
      }
      t4.addEventListener("click",btn_listener);
      t5.addEventListener("click",btn_listener);

</script>

[ 이벤트(EVENT)의 전파 및 전파를 막는 방법 ]

<head>
        <style>
            html{border:5px solid red;padding:30px;}
            body{border:5px solid green;padding:30px;}
            fieldset{border:5px solid blue;padding:30px;}
            input{border:5px solid black;padding:30px;}
        </style>
    </head>
    
        <fieldset>
            <legend>event propagation</legend>
            <input type="button" id="target" value="target">
        </fieldset>
        <script>
        function handler(event){
            var phases = ['capturing', 'target', 'bubbling']
            // event 객체의 target속성을 통해 접근하는 경우 가장 구체적으로 클릭된 element 객체를 가지고 오게된다.
            // 이때는 전파와 상관없이 클릭된 객체를 가리키게 된다.
            // 하지만, this키워드의 경우 event가 발생된 영역에 있는 element를 가리키게 되는데
            // 지금의 경우는 button을 클릭해도 그 버튼은 fieldset 이벤트 영역에 있고 이는 또 body, html 영역에 있기 때문에
            // 해당 이벤트가 발생하면서 속해 있는 영역 element를 가리키게 된다.(전파된 영역의 객체)
            // 따라서, 캡처링이기 때문에 html->body->field->button순으로 나오게 된다.
            // 이에 반해, event.target.nodeName의 경우는 button을 클릭시 button, fieldset을 클릭시 fieldset이 나오게 된다.
            console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
        }
        document.getElementById('target').addEventListener('click', handler, true);
        document.querySelector('fieldset').addEventListener('click', handler, true);
        document.querySelector('body').addEventListener('click', handler, true);
        document.querySelector('html').addEventListener('click', handler, true);
        </script>
        <script type="text/javascript">
          /*
            [ 이벤트의 전파 ]
            : 위의 코드를 보면 input 태그로 만든 button은 fieldset에 속해 있고, filedset은 body태그에 속해있다.
              또, body태그는 html태그에 속해있는데
              button, fieldset, body, html 모두에 이벤트 리스너를 등록해 놓고
              제일 안에 있는 button을 클릭하게되면, button이벤트만 동작하는 것이 아니라 이벤트가 전파되어
              fieldset, body, html 모두 이벤트가 발생하게 된다. 이를 이벤트의 전파라고 하는데

[ 이벤트 전파의 종류 ] 에는 2가지가 있다.
              button을 클릭시
              1. Capturing(캡처링) : button -> fieldset -> body -> html 순으로 이벤트가 수행되는 전파
              2. Bubbling(버블링) : html -> body -> fieldset -> button 순으로 이벤트가 수행되는 전파
              -> 하지만, 캡처링은 IE의 낮은 버전에서는 지원하지 않는 경우가 많아 선호되지 않고
              주로 버블링이 선호된다.

이때, element.addEventListener(첫번째,두번째,세번째) 에서 세번째 인자는 캡처링 유무를 나타내게 되는데
              캡처링 방식으로 할 경우 true를 기술해주고, 버블링 방식으로할 때는 생략하거나 false를 입력해 주면 된다.
              -> element.addEventListener("click",function(){},false)
          */

/*
            [ 이벤트 전파의 방지 ]
            : 이벤트 전파를 막는 메서드는 event객체의 stopPropagation()메서드이다.
            예를들어, 전파되던 이벤트를 body에서 더이상 전파되지 않도록 한다면(버블링일 경우)
            (body element).addEventListener("click",function(event){event.stopPropagation()},false) 를 해주면 된다.
          */
        </script>

[ 태그의 기본 이벤트를 막는 방법 ]

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
  </head>
  
    /*
      [ 기본 이벤트를 막는 방법 ]
      : 예를들어 a태그는 href에 지정된 주소로 이동하는게 기본이벤트이고, form태그의 submit 버튼은 전송하는 역할처럼
        각 태그는 기본적인 이벤트를 가진 것들이 있다.
        이러한 기본 이벤트를 막는 방법에 몇가지가 있는데

1. inline 방식의 경우
        2. 프로퍼티 방식의 경우
          :
        3. addEventListener 방식의 경우
          : event객체의 preventDefault() 메서드를 수행하면 된다. 단!) IE9버전 이하에서는 동작하지 않음으로
            -> event.returnValue = false;로 해주면 된다.
    */

// 1. Inline 방식
    <p>
      <label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
    </p>
    <p>
      // 위의 체크박스가 체크된 경우 return false하게 된다.
      <a href="http://opentutorials.org" onclick="if(document.getElementById('prevent').checked) return false;">opentutorials</a>
    </p>
    <p>
      <form action="http://opentutorials.org" onsubmit="if(document.getElementById('prevent').checked) return false;">
          <input type="submit" />
      </form>
    </p>

<a id="googleA" href="http://google.com" onclick="return test();">구글로 이동</a>
    <script type="text/javascript">
      var test = function (event){
        return false; // 기본 동작을 막기 위함
      }
    </script>

// 2. 프로퍼티 방식으로 기본 동작을 취소하는 방법
    <script>
      document.querySelector('a').onclick = function(event){
          if(document.getElementById('prevent').checked) // 체크가 되어 있는 경우에
              return false; // return false 하면 a태그의 기본 동작을 막을 수 있다.
      };

document.querySelector('form').onclick = function(event){
          if(document.getElementById('prevent').checked)
              return false;
      };

</script>

// 3. addEventListener의 경우 -> event.preventDefault() or event.returnValue = false;
    <script type="text/javascript">
      var test2 = function(event){
        if ( document.getElementById('prevent').checked)
          event.preventDefault(); // 기본 동작을 막는다.
      }
      document.querySelector('a').addEventListener("click",test2,false);
      document.querySelector('form').addEventListener("click",test2,false);
    </script>

[ FORM 태그의 대표 이벤트 종류 ]

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
  </head>
  
    <pre>
      [ FORM 태그 관련 대표 이벤트 ]
      1. submit
        : form에서 submit 버튼을 클릭해 form내부의 데이터가 action으로 지정한 곳으로 전달될 때 발생.
      2. click
        : 클릭했을 때 발생되는 이벤트
      3. focus
        : ELEMENT가 포커스를 얻었을 때(입력가능한 상태) 가 되었을 때 발생하는 이벤트
      4. blur
        : ELEMENT가 포커스를 잃었을 때 발생하는 이벤트
    </pre>
    
    <form id="formID" action="http://www.google.com" method="post">
      이름 : <input id="nameID" type="text" value="" />
      <input type="submit" value="제출" />
    </form>
    <script type="text/javascript">
      var areaElement = document.getElementById("formID");
      // form태그에 submit 이벤트를 건다.
      areaElement.addEventListener("submit",function(event){

if ( event.target.nameID.value.length < 1 ) {
          // 클릭된 폼태그의 nameID를 가진 엘리먼트의 입력된 값이 한글자보다 작은 경우
          event.preventDefault(); // 기본이벤트를 방지함 -> 즉, submit발생을 막음
          // addEventListener의 경우 기본동작을 막기 위해 return false대신 preventDefault()를 사용한다.
          alert("이름은 반드시 입력되어야 합니다.");
        }

});
    </script>

[ 문서의 태그의 로딩과 관련된 load와 unload 이벤트 ]

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      function unloadF(){
        alert("해제");
      }
    </script>
  </head>
  
    <pre>
      [ 문서의 로딩과 관련된 load 이벤트와 unload 이벤트 ]
      1. load
        : html태그가 전부 로딩되어 접근할 수 있는 상태가 되었을 때 발생하는 이벤트이다.
      2. unload
        : html 태그가 메모리에서 내려가기 직전에 호출되는 이벤트이다.
        -> 현재 창이 닫히기 직전에 특정 작업을 처리 후 닫고자 할 때 사용하면 좋다.

load 이벤트가 중요한 이유는, 특정 ELEMENT에 접근하는 스크립트를 load 이벤트 없이
      선언할 때에는 접근하려는 ELEMENT보다 아래쪽에 위치시켜야 한다는 것이다.

why? 아직 메모리에 올라오지도 않은 상태에서 스크립트가 접근하려하면 존재하지 않는
      ELEMENT를 참조하게 되니까 오류가 발생하게 된다.

따라서, 바디태그 맨 밑쪽에 위치하는 것이 좋지만 그렇게 하지 않고도
      load 이벤트 발생시(태그가 다 로딩되면) 해당 스크립트가 동작하도록 해줘도 된다.

또한, load와 unload 이벤트는 inline방식으로는 body태그에서 수행해주면 된다.
    </pre>
    <script type="text/javascript">
      // 해당 스크립트는 areaID div 보다 위에 위치해 있음으로 본래 오류가 나야하지만
      // 나지 않도록 load함수로 수행토록 하겠다.

// 프러퍼티 이벤트 방식
      window.onload = function(){
        document.getElementById("areaID").innerHTML = "데이터 넣기";
      }
      // 이때, onload 프러퍼티로 이벤트를 지정할시 단점은 무엇일까?
      // -> 만약 본인이 onload 이벤트를 두번 지정할 경우 더 아래에서 지정한
      // onload이벤트로 덮어버려 이전에 선언한 onload는 동작하지 않게 된다.
      // 따라서, onload 이벤트 지정시 addEventListener를 통해 등록해주도록 하자.
      window.addEventListener("load",function(){
        document.getElementById("areaID").style.border = "1px solid red";
      });
    </script>
    <div id="areaID"></div>

[ 그 외 알아두면 좋은 이벤트 ]

- contextmenu event : 마우스 우클릭시 발생

-> 마우스 우클릭 방지 이벤트(요소 검사(F12)를 방지하기 위해 사용 가능)

- shift, ctrl 키와 같이 클릭했는지 유무를 알 수 있는 event 프러퍼티

event.shiftKey, event.ctrlKey

- 클릭한 곳의 마우스 좌표를 알 수 있는 event.clientX, event.clientY

<!DOCTYPE html>

<select id="sel">
          <option value="JAVA">JAVA</option>
          <option value="CSS">CSS</option>
        </select>
        <script type="text/javascript">
          document.getElementById("sel").addEventListener("change",function(event){
            alert("변경된 값 : " + event.target.value);
          });
        </script>

<!--
          3. [ 클릭 이벤트시 보조키를 같이 누른지 여부를 체크하는 방법 ]

1) shift키 : event.shiftKey
            2) ctrl키 : event.ctrlKey
        -->
        <div id="target2" style="border:1px solid blue;width:100px;height:100px;"></div>
        <script type="text/javascript">
          document.getElementById("target2").addEventListener("click",function(event){
            if ( event.shiftKey ) { // click시 shift키를 같이 누른 경우
              alert("click + shift key");
            }else if ( event.ctrlKey ) {
              alert("click + ctrl key");
            }else {
              alert("just click");
            }
          });
        </script>

<div id="target3" style="border:1px solid green;width:100px;height:100px;"></div>
        <script type="text/javascript">
          document.getElementById("target3").addEventListener("click",function(event){
            alert("클릭 좌표 : ( " + event.clientX + " , " + event.clientY + " )");
          });
        </script>

저작자표시 비영리

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

Text Node 제어와 Document 및 스크린, 스크롤 위치 제어 (0)	2017.12.05
Node 객체에 대하여(NODE 객체와 NODE객체 컨트롤하기) (0)	2017.12.03
5판 7장 객체(Object)와 배열(Array) (0)	2017.11.13

악덕고용주의 개발 일기

이벤트 및 우클릭 방지

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

+ Recent posts

티스토리툴바