윤제니

JavaScript - 이벤트 객체, 기본이벤트 실행 방지, 이벤트 버블링 방지, 이벤트 강제실행, this 본문

JavaScript/JavaScript

JavaScript - 이벤트 객체, 기본이벤트 실행 방지, 이벤트 버블링 방지, 이벤트 강제실행, this

꿈다루 2020. 5. 4. 19:01

이벤트 객체

  • 사용자가 직접 만들지 않아도 기본적으로 제공
  • 속성과 메소드가 존재
  • ex) 마우스 클릭시 클릭한 좌표값, 이벤트를 발생시킨 객체가 어떤 것인지

  1) 기본형식

  • 익명함수의 매개변수(event)가 '이벤트 객체'를 의미 
  • 매개변수 이므로 꼭 변수명을 'event'로 사용할 필요는 없지만 보통 이벤트 객체의 의미로 'event'나 'e'로 많이 사용
bt.onclick = function(event) {
  event.속성
  event.메서드
}

 

  2) 주요 속성

속성 설명
target 이벤트를 발생시킨 객체를 반환
type 이벤트의 이름을 반환
clientX 이벤트가 발생한 X좌표값을 반환(브라우저 기준)
clientY 이벤트가 발생한 Y좌표값을 반환(브라우저 기준)
screenX 이벤트가 발생한 X좌표값을 반환(스크린 기준)
screenY 이벤트가 발생한 Y좌표값을 반환(스크린 기준)
button 마우스 왼쪽, 가운데, 오른쪽 버튼값을 반환
altKey alt 키가 눌러졌을 때 true 값을 반환
ctrlKey ctrl 키가 눌러졌을 때 true 값을 반환
shiftKey shift 키가 true 값을 반환

 

 

  3) 메서드 

      ⓐ 기본 이벤트의 실행 방지

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>이벤트</title>
  </head>
  <body>
    <div>
      <a href="https://jenny-daru.tistory.com/" id="a">윤제니 블로그</a>
    </div>
  </body>
  <script>
    window.onload = function () {
      var a = document.getElementById("a");
      a.onclick = function () {
        alert("윤제니 블로그");
      };
    };
  </script>
</html>

  => '윤제니블로그'를 클릭하면 자바스크립트의 이벤트만 작동되어야 하는데, 자바스크립트를 실행한 후 <a> 요소의 기능인 페이지 이동

       실행됨. 만약, 자바스크립트만 실행하고 싶다면 <a> 요소의 기본 이벤트가 실행되지 못하도록 막아 주어야 한다. 

 

 해결 => 'return false'를 이용, false 값을 리턴해 주면 기본 이벤트의 실행을 막을 수 있다. 

  <script>
    window.onload = function () {
      var a = document.getElementById("a");
      a.onclick = function (event) {
        alert("윤제니 블로그");
        return false;
      };
    };
  </script>

 

 

    ⓑ 이벤트 버블링 방지

  •  어미 요소와 자식 요소 모두 이벤트가 연결되어 있으면 자식 요소의 이벤트 실행시 어미 요소의 이벤트도 같이 실행되는 현상

   => <p>요소 클릭시 상위 요소 (<div>)에 적용된 이벤트도 같이 실행!! 

    <div id="a">
      <p id="b">클릭</p>
    </div>

  <script>
    window.onload = function () {
      var a = document.getElementById("a");
      var b = document.getElementById("b");
      a.onclick = function () {
        alert("ok2");
      };
      b.onclick = function () {
        alert("ok1");
      };
    };
  </script>

 

  해결 =>'cancleBubble'속성을 이용하

  <script>
    window.onload = function () {
      var a = document.getElementById("a");
      var b = document.getElementById("b");
      a.onclick = function () {
        alert("ok2");
      };
      b.onclick = function (event) {
        alert("ok1");
        if (window.event) {
          window.event.cancelBubble = true;
        } else {
          event.stopPropagation();
        }
      };
    };
  </script>

 

 

  4) 강제 실행

  • 이벤트 강제 실행 형식 
  • 이벤트를 메서드 형식으로 사용하게 되면 이벤트의 강제 실행이 발생 
객체.on이벤트명()

 

 => <div id="bt">클릭</div>을 클릭하지 않아도 페이지가 열릴 때 이벤트가 강제적으로 작동됨. 

    <div id="bt">클릭</div>

  <script>
    window.onload = function () {
      var a = document.getElementById("bt");
      bt.onclick = function () {
        alert("윤제니");
      };
      bt.onclick();
    };
  </script>

 

  => bt.onclick(); 을 마지막에 실행하지 않는다면 첫 화면에 <p>태그가 나타나지만 첫 화면에 <p>태그를 사라지게 하고 싶다면 

       페이지가 실행했을 때 <div>를 한번 클릭한 것처럼 만들면 된다. 이럴 때 필요한 것이 '이벤트 강제 실행' 이다. 

    <div id="bt">클릭</div>
    <p id="content">내용</p>
 
  <script>
    window.onload = function () {
      var bt = document.getElementById("bt");
      var content = document.getElementById("content");
      var check = false;
      bt.onclick = function () {
        if (!check) {
          content.style.display = "none";
          check = true;
        } else {
          content.style.display = "block";
          check = false;
        }
      };
      bt.onclick();
    };
  </script>

 

 

  5) this 키워드 사용 

 

=> var apple = document.getElementById("apple") 처럼 변수에 요소가 저장되면 그 변수는 객체가 된다. (=객체 '인스턴스'화 시킴)

     '이벤트 핸들러' 익명함수 안의 this 역시 '객체'를 의미하게 되어 'this.style.display'에서 this는 apple의 객체가 되는 것

var apple = document.getElementById("apple");

apple.click=function() {

  this.style.display="block";

}

 


    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        cursor: pointer;
      }
    </style>


    <div id="bt">클릭</div>


  <script>
    window.onload = function () {
      var bt = document.getElementById("bt");
      var check = false;
      bt.onclick = function () {
        if (!check) {
          this.style.background = "red";
          check = true;
        } else {
          this.style.background = "orange";
          check = false;
        }
      };
      bt.onclick();
    };
  </script>

 

  =>  여기서 this는 " bt.onclick "의 bt객체를 의미하므로 아래와 같이 코딩해도 상관 없다.

bt.style.background="red"

bt.style.background="orange";
저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

JavaScript - Document 객체, Location 객체, Screen 객체, History 객체, Navigator 객체  (0) 2020.05.05
JavaScript - BOM(Browser Object Model), Window 객체  (0) 2020.05.04
JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결  (3) 2020.05.04
JavaScript - 생성자 함수, this, Object 객체, 클로저(closure)  (0) 2020.05.04
JavaScript - 객체(Object), 메서드, 내장객체  (0) 2020.05.02
'JavaScript/JavaScript' Related Articles more