-
Notifications
You must be signed in to change notification settings - Fork 0
/
handling-events(mouse_acoes-tipos_funcoes).html
206 lines (173 loc) · 7.6 KB
/
handling-events(mouse_acoes-tipos_funcoes).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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' href='css/style.css' type='text/css' />
<title>JS tutorial practicing</title>
</head>
<body>
<h1>Handling Events - manipulação de eventos</h1>
<section>
<p><b>ONLOAD:</b> Se ativa APÓS termina de carregar a página.</p>
<p>Fora do ONLOAD: Se ativa ANTES de carregar a página.</p>
<script>
window.onload = function () {
alert('Página carregou só agora apareceu')
}
alert("Apareceu antes de carregar a página")
</script>
</section>
<section>
<p><b>ONCLICK:</b> algumas formas de criar "click".</p>
<b>Exemplo 01</b> cria uma função com ação direto na tag
<br />
<button id="exemplo1" onclick="alert('Exemplo 01 - OK')">exemplo 01</button>
<br /><br />
<b>Exemplo 02</b> cria uma função com nome direto na tag
<br />
<button id="exemplo2" onclick="exemplo2()">exemplo 02</button>
<br /><br />
<b>Exemplo 03</b> cria uma função no javaScript usando "onclick"
<br />
<button id="exemplo3">exemplo 03</button>
<br /><br />
<b>Exemplo 04</b> cria uma função no javaScript usando "addEventListener" mais nome da função
<br />
<button id="exemplo4">exemplo 04</button>
<br /><br />
<b>Exemplo 05</b> cria uma função no javaScript usando "addEventListener" e escreve a função direto
<br />
<button id="exemplo5">exemplo 05</button>
<br /><br />
<b>Exemplo 06</b> cria uma variável para o botão, cria função usando "addEventListener", cria função
"removeEventListener" pegando a variável.
<br />
<button id="exemplo6">exemplo 6 Só 1 click</button>
<script language="javascript">
function exemplo2() {
alert("exemplo 02 - OK");
};
document.getElementById("exemplo3").onclick = function () { exemplo3() };
function exemplo3() {
alert("exemplo 03 - OK");
};
document.getElementById("exemplo4").addEventListener("click", exemplo4);
function exemplo4() {
alert("exemplo 04 - OK");
};
document.getElementById("exemplo5").addEventListener("click", function () {
alert("exemplo 05 - OK");
});
var ex06 = document.getElementById("exemplo6");
ex06.addEventListener("click", exemplo6);
function exemplo6() {
alert("exemplo 06 - OK");
ex06.removeEventListener("click", exemplo6);
};
</script>
</section>
<section>
<p><b>MOUSEOVER:</b> evento aconte quando o curso do mouse estiver acima do evento selecionado. <br />
<b>MOUSELEAVE:</b> evento aconte quando o curso do mouse sair de acima do evento selecionado.</p>
<a href="javascript:avoid(0)" class="hover">MOUSEOVER e MOUSELEAVE</a>
<br /><br />
<div id="hover-leave">MOUSEOVER sumir e MOUSELEAVE aparecer</div>
<script>
var mouse = document.querySelector(".hover")
mouse.addEventListener('mouseover', function () {
var textAcao = document.querySelector("#hover-leave");
textAcao.style.display = "none";
mouse.addEventListener('mouseleave', function () {
textAcao.style.display = "block";
});
});
</script>
</table>
</section>
<section>
<p><b>CHANGE:</b> é ativado para os elementos input, select e textarea quando uma alteração no valor do elemento é
feita pelo usuário.</p>
<select id="linguages">
<option value="valor 0"> </option>
<option value="valor 1">PHP </option>
<option value="valor 2">javaScript</option>
<option value="valor 3">java</option>
<option value="valor 4">C#</option>
</select>
<br /><br />
<div id="change">Selecionado mostrar aqui</div>
<script>
document.getElementById("linguages").addEventListener('change', function () {
var todasOptions = this.options;
var arrayAtual = this.selectedIndex;
document.getElementById("change").innerHTML =
"Selecionado: " + todasOptions[arrayAtual].text + "<br/><br/>"
+ " HTML Value: " + this.value;
});
</script>
</section>
<section>
<p><b>BLUR:</b> é disparado quando um elemento perdeu o foco (quando sai do input).</p>
<input type="text" id="nome" placeholder="digite aqui">
<input type="text" id="copienome" placeholder="cópia texto automático">
<script>
var copienome = document.getElementById('copienome');
document.getElementById('nome').addEventListener('blur', function () {
copienome.value = this.value;
copienome.style.textTransform = "uppercase";
});
</script>
</section>
<section>
<p><b>KEYUP:</b> é acionado quando uma tecla é liberada, ou seja assim que você tirar o dedo dela.</p>
<input type="text" id="keyup" placeholder="digite aqui"> - <i id="result">resultado aqui</i>
<script>
document.getElementById("keyup").addEventListener('keyup', function () {
document.getElementById("result").innerHTML = this.value;
});
</script>
</section>
<section>
<p><b>KEYPRESS:</b> é disparado quando uma tecla é pressionada. Neste caso a tecla 13 que em keyCode = ENTER</p>
<input type="text" id="texto" placeholder="digite aqui e ENTER"> - <i id="resultado"> resultado aqui</i>
<script>
var resultado = document.getElementById("resultado");
document.getElementById("texto").addEventListener('keypress', function (evento) {
if (evento.keyCode == 13) {
resultado.innerHTML = this.value;
}
})
</script>
</section>
<section>
<p><b>SUBMIT:</b> é disparado quando o formulário entre em estado de submit ou seja enviar os dados para algum local.</p>
<form action="#" method="post">
<input type="text" name="name" placeholder="Nome">
<input type="password" name="password" placeholder="Senha">
<input type="email" name="email" placeholder="[email protected]">
<button type="submit">Enter</button>
</form><br />
<b id="resposta"></b>
<script>
var form = document.querySelector("form");
form.addEventListener('submit', function (evento) {
evento.preventDefault();
var escreve = "Formulários validados";
for (var i = 0; i < this.elements.length; i++) {
var item = this.elements[i];
if (item.type !== "submit") {
if (item.value == "") {
item.classList.add("error");
escreve = "Erro de validação";
} else {
item.classList.remove("error");
}
}
}
document.getElementById("resposta").innerHTML = escreve;
});
</script>
</section>
</body>
</html>