Skip to content

Instantly share code, notes, and snippets.

@Piterden
Last active December 25, 2019 23:31
Show Gist options
  • Save Piterden/8fb4829b8e4a242c96af42d9a8f41b40 to your computer and use it in GitHub Desktop.
Save Piterden/8fb4829b8e4a242c96af42d9a8f41b40 to your computer and use it in GitHub Desktop.
Events.
#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
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)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
#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
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment