Javascript event process

capture or bubbling

by xiaoluoboding

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<div id="app">
  <ul @click.capture="callback($event)">
    <li @click.capture="callback($event)">One</li>
    <ul @click.capture="callback($event)">
      <li @click.capture="callback($event)">Two</li>
      <ul @click.capture="callback($event)">
        <li @click.capture="callback($event)">Three. Click Me!!!</li>
      </ul>
    </ul>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  transition: background 800ms;
}

ul {
  height: 100%;
  list-style: none;
  background: hsl(193, 66%, 85%);
}

li {
  height: 100%;
  background: hsl(193, 66%, 95%);
}

.highlight {
  background: red;
}

JavaScript

var pause = 200;
new Vue({
  el: "#app",

  methods: {
    callback(event) {
      var ms = event.timeout = (event.timeout + pause) || 0;
      var target = event.currentTarget;

      console.log(target);

      setTimeout(function() {
        target.classList.add('highlight');
        setTimeout(function() {
          target.classList.remove('highlight');
        }, pause);
      }, ms);
    }
  }
})