집 > 기사 > 웹 프론트엔드 > Vue 이벤트 수정자 캡처 사용에 대한 자세한 소개

Vue 이벤트 수정자 캡처 사용에 대한 자세한 소개

亚连원래의: 2018-06-14 15:46:412395검색

캡처 이벤트 수정자의 기능은 요소에 리스너를 추가하는 것입니다. 요소가 버블링되면 이 수정자가 있는 요소가 먼저 트리거됩니다. 이번 글에서는 Vue 이벤트 수정자 캡쳐 사용법을 소개합니다. 필요하신 친구들은 참고하시면 됩니다

캡쳐 이벤트 수정자의 기능은 이벤트 리스너를 추가할 때 이벤트 캡쳐 모드를 사용하는 것입니다

즉, 추가하는 것입니다. 요소에 대한 리스너, 요소가 버블링되면 이 수정자가 있는 요소가 먼저 트리거됩니다. 수정자가 여러 개 있는 경우 외부에서 내부로 트리거됩니다.

즉, 이벤트 수식어를 가진 사람이 먼저 트리거됩니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>.capture事件修饰符</title>
  <style type="text/css">
    * {
      margin: 0 auto;
      text-align: center;
      line-height: 40px;
    }
    p {
      width: 100px;
    }
    #obj1 {
      background: deeppink;
    }
    #obj2 {
      background: pink;
    }
    #obj3 {
      background: hotpink;
    }
    #obj4 {
      background: #ff4225;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="content">
  <p id="obj1" v-on:click.capture="doc">
    obj1
    <p id="obj2" v-on:click.capture="doc">
      obj2
      <p id="obj3" v-on:click="doc">
        obj3
        <p id="obj4" v-on:click="doc">
          obj4
          <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
          由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
          -->
        </p>
      </p>
    </p>
  </p>
</p>
<script type="text/javascript">
  var content = new Vue({
    el: "#content",
    data: {
      id: &#39;&#39;
    },
    methods: {
      doc: function () {
        this.id = event.currentTarget.id;
        alert(this.id)
      }
    }
  })
</script>
</body>
</html>

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

Vue 이벤트 수정자 캡처 사용에 대한 자세한 소개

관련 기사