Events.

events.markdown

Vue Events.

---

Events tester for input element.

A Pen by Den Efremov on CodePen.

License.

index.pug

#app
  input#input(
    draggable="true"
    @click="triggerEvent",
    @contextmenu="triggerEvent",
    @dblclick="triggerEvent",
    @mousedown="triggerEvent",
    @mouseenter="triggerEvent",
    @mouseleave="triggerEvent",
    @mousemove="triggerEvent",
    @mouseover="triggerEvent",
    @mouseout="triggerEvent",
    @mouseup="triggerEvent",
    @keydown="triggerEvent",
    @keypress="triggerEvent",
    @keyup="triggerEvent",
    @abort="triggerEvent",
    @beforeunload="triggerEvent",
    @error="triggerEvent",
    @hashchange="triggerEvent",
    @load="triggerEvent",
    @pageshow="triggerEvent",
    @pagehide="triggerEvent",
    @resize="triggerEvent",
    @scroll="triggerEvent",
    @unload="triggerEvent",
    @blur="triggerEvent",
    @change="triggerEvent",
    @focus="triggerEvent",
    @focusin="triggerEvent",
    @focusout="triggerEvent",
    @input="triggerEvent",
    @invalid="triggerEvent",
    @reset="triggerEvent",
    @search="triggerEvent",
    @select="triggerEvent",
    @submit="triggerEvent",
    @drag="triggerEvent",
    @dragend="triggerEvent",
    @dragenter="triggerEvent",
    @dragleave="triggerEvent",
    @dragover="triggerEvent",
    @dragstart="triggerEvent",
    @drop="triggerEvent",
    @copy="triggerEvent",
    @cut="triggerEvent",
    @paste="triggerEvent",
    @animationinterval="triggerEvent"
  )
  .container
    .row
      .col.s1.click click
      .col.s1.contextmenu contextmenu
      .col.s1.dblclick dblclick
      .col.s1.mousedown mousedown
      .col.s1.mouseenter mouseenter
      .col.s1.mouseleave mouseleave
      .col.s1.mousemove mousemove
      .col.s1.mouseover mouseover
      .col.s1.mouseout mouseout
      .col.s1.mouseup mouseup
      .col.s1.keydown keydown
      .col.s1.keypress keypress
      .col.s1.keyup keyup
      .col.s1.abort abort
      .col.s1.beforeunload beforeunload
      .col.s1.error error
      .col.s1.hashchange hashchange
      .col.s1.load load
      .col.s1.pageshow pageshow
      .col.s1.pagehide pagehide
      .col.s1.resize resize
      .col.s1.scroll scroll
      .col.s1.unload unload
      .col.s1.blur blur
      .col.s1.change change
      .col.s1.focus focus
      .col.s1.focusin focusin
      .col.s1.focusout focusout
      .col.s1.input input
      .col.s1.invalid invalid
      .col.s1.reset reset
      .col.s1.search search
      .col.s1.select select
      .col.s1.submit submit
      .col.s1.drag drag
      .col.s1.dragend dragend
      .col.s1.dragenter dragenter
      .col.s1.dragleave dragleave
      .col.s1.dragover dragover
      .col.s1.dragstart dragstart
      .col.s1.drop drop
      .col.s1.copy copy
      .col.s1.cut cut
      .col.s1.paste paste
      .col.s1.animationinterval animationinterval

script.babel

new Vue({
  el: '#app',
  methods: {
    triggerEvent (e) {
      const el = this.$el.querySelector('.' + e.type)
      el.style.backgroundColor = '#000'
      el.style.color = '#fff'
      setTimeout(() => {
        el.style.backgroundColor = '#fff'
        el.style.color = '#000'
      }, 1000)
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

style.stylus

#app
  input
    display block
    width 80%
    margin 20px auto
    padding 5px 15px
    border 1px solid #ccc
    border-radius 5px
    background #fff
    transition all 1s ease
    &:hover
      background #ccc
  .col
    transition background 1s ease
    height 40px
    font-size .9em
    text-align center

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />