js event 冒泡和捕获事件详细介绍【转】

姊妹篇

js event addEventListener() 冒泡和捕获事件详细介绍 [原]==》https://www.cnblogs.com/whatlonelytear/p/15852063.html

js event 冒泡和捕获事件详细介绍【转】==》https://www.cnblogs.com/whatlonelytear/p/6250382.html

冒泡和捕获

  • 冒泡: 事件从内向外,从下向上执行 (默认行为)
  • 捕获: 事件从外向内,从上向下执行

 

 

vue之capture 捕获事件

capture.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>capture</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
  <style type="text/css">
    div {
      width: 400px;
    }

    .pinkBorder {
      border: 1px solid;
      border-color: blue;
    }
  </style>
</head>

<body>
  <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
  但因为id1,id2配置了.capture, 所以id1,id2这两个变成了捕获事件, 优先触发,
 于是先执行id1,id2捕获, 再执行id4,id3冒泡, 最终按序弹出id1,id2,id4,id3 -->
  <div id="app">
    <div id="id1" class='pinkBorder' v-on:click.capture="doit">
      id1
      <div id="id2" class='pinkBorder' v-on:click.capture="doit">
        id2
        <div id="id3" class='pinkBorder' v-on:click="doit">
          id3
          <div id="id4" class='pinkBorder' v-on:click="doit">
            id4(点我最终按序弹出id1,id2,id4,id3)
          </div>
        </div>
      </div>
    </div>

  </div>

</body>
<script>

  var app = new Vue({
    el: "#app",
    data: {
      id: ''
    },
    methods: {
      doit: function () {
        this.id = event.currentTarget.id;
        alert(this.id)
      }
    }
  })



  // vm.greet();
</script>

</html>

 

 

vue之self 自我事件

self.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>self</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
  <style type="text/css">
    div {
      width: 400px;
    }

    .pinkBorder {
      border: 1px solid;
      border-color: green;
    }
  </style>
</head>

<body>

  <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id2配置了.self,检测到不是自身,所以冒泡过程会跳过id2,最终按序弹出id4,id3,id1 -->
  <div id="content">
    <div id="id1" class='pinkBorder' v-on:click="doit">
      id1
      <div id="id2" class='pinkBorder' v-on:click.self="doit">
        id2
        <div id="id3" class='pinkBorder' v-on:click="doit">
          id3
          <div id="id4" class='pinkBorder' v-on:click="doit">
            id4(点我按序弹出id4,id3,id1)

          </div>
        </div>
      </div>
    </div>
  </div>

</body>
<script>

  var content = new Vue({
    el: "#content",
    data: {
      id: ''
    },
    methods: {
      doit: function () {
        this.id = event.currentTarget.id;
        alert(this.id)
      }
    }
  })

  // vm.greet();
</script>

</html>

 

vue之stop 阻止事件

self.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>stop</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
  <style type="text/css">
    div {
      width: 400px;
    }

    .pinkBorder {
      border: 1px solid;
      border-color: green;
    }
  </style>
</head>

<body>
    <!-- https://cn.vuejs.org/v2/guide/events.html#事件修饰符 -->
  <!-- 根据冒泡原则,点击id4时,正常情况应该按序弹出id4,id3,id2,id1
但因为id2配置了.stop,所以冒泡事件在id2之后终止,最终按序弹出id4,id3,id2 -->
  <div id="content">
    <div id="id1" class='pinkBorder' v-on:click="doit">
      id1
      <div id="id2" class='pinkBorder' v-on:click.stop="doit">
        id2 (v-on:click.stop)
        <div id="id3" class='pinkBorder' v-on:click="doit">
          id3
          <div id="id4" class='pinkBorder' v-on:click="doit">
            id4(点我按序弹出id4,id3,id2 )
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
<script>

  var content = new Vue({
    el: "#content",
    data: {
      id: ''
    },
    methods: {
      doit: function () {
        this.id = event.currentTarget.id;
        alert(this.id)
      }
    }
  })

  // vm.greet();
</script>

</html>

 

参考

js之事件冒泡和事件捕获详细介绍==>https://www.jb51.net/article/42492.htm

posted @ 2017-01-04 21:59  苦涩泪滴  阅读(485)  评论(0)  编辑  收藏  举报