-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path10-events.html
134 lines (117 loc) · 3.23 KB
/
10-events.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Easy Installation: https://alpinejs.dev/essentials/installation -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<title>Alpine.js : Declare & React</title>
</head>
<body>
<!--
You can easily run code on dispatched DOM events
https://alpinejs.dev/directives/on
-->
<!-- x-on: directive -->
<button x-data x-on:click="alert( 'Hello World' )">Hello</button>
<!-- @shortcut -->
<button x-data @click="alert( 'Hello World' )">Hello</button>
<!-- $event, $el object -->
<button x-data @click="console.log( $event )">Event Object</button>
<button
x-data
@click="alert( $event.target.getAttribute( 'message' ) )"
message="Hola Luis"
>
It's Magic
</button>
<button
x-data
@click="alert( $el.getAttribute( 'message' ) )"
message="Hola Luis"
>
Same Dom
</button>
<hr class="my-5">
<!--
Keyboard events
- keydown
- keyup
You can also chain them
-->
<div>
<input
x-data
type="text"
@keydown="if( $event.code == 'Enter' ){ alert( 'submitted' ); }">
</div>
<hr class="my-5">
<!--
Key Modifers (Cabeb Notation)
- shift
- enter
- space
- ctrl
- cmd
- meta
- alt
- up,down, left, right
- escape
- tab
- caps-lock
- equal
- period
- etc.
-->
<div>
<input
x-data
type="text"
@keydown.shift.enter="alert( 'submitted' )">
</div>
<hr class="my-5">
<!--
Event Modifiers
- .prevent
- .stop
- .outside
- .window
- .document
- .once
- .debounce
- .throttle
- .self
- .camel
- .dot
- .passive
-->
<form
x-data="{
name : '',
email : '',
message : '',
submitForm(){
this.name = ''
this.email = ''
this.message = 'Submitted'
},
clearMessage(){
this.message = ''
}
}"
@keydown.enter="submitForm"
@submit.prevent="submitForm">
<div
x-show="message"
x-text="message"
@click.outside="clearMessage" "
class="alert alert-info"></div>
<div>
<input type="text" x-model="name" placeholder="Name">
</div>
<div>
<input type="text" x-model="email" placeholder="Email">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>