Galera, estou estudando JQuery e estou com uma duvida sobre eventos.
A questão é a seguinte, alguns dos eventos que foram tratados em JQuery não são mostrados no console do navegador, porem os mesmos eventos tratados em JS puro aparecem, por exemplo os eventos Keydown, Keypress e Keyup.
Pra ajudar abaixo os respectivos codigos:
JS
input.onselect = function(){
console.log("select");
};
input.onkeydown = function(){
console.log("keydown");
};
input.onkeypress = function(){
console.log("keypress");
};
JQuery
/*tratamento o evento key*/
$("input").keydown(function(event){
console.log("keydown: ("+ event.which +")");
});
/* tratando o evento keypress */
$("input").keypress(function (event){
console.log("keypress : ("+ event.which +")");
});
/*tratando o evento keyup*/
$("input").keyup(function(event) {
console.log("keyup: ("+ event.which +")");
});
Fico esperando um boa alma pra me orientar nesse assunto obscuro…
Posta o código completo envolvendo essa parte. A ferramenta https://jsfiddle.net/ facilita demonstrar esse tipo de caso.
1 curtida
Opa, esqueci do html, segue os códigos completos.
HTML dos eventos em JS
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>JavaScript - Eventos</title>
<script type="text/javascript" src="js\eventos.js"></script>
<style>
body{
width: 2000px;
height: 200px;
}
div{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body onresize="resize()" onscroll="scroll()">
<form>
<label for="campo_nome">Nome: </label>
<input id="campo_nome" type="text">
</form>
<div></div>
</body>
</html>
Script em JS
window.onload = function(event){
console.log("Carregado Documento");
var input = document.getElementById("campo_nome");
input.onfocus = function() {
console.log("focus");
};
input.addEventListener("change", function(){
console.log("change");
});
input.onblur = function(){
console.log("blur");
};
input.onselect = function(){
console.log("select");
};
input.onkeydown = function(){
console.log("keydown");
};
input.onkeypress = function(){
console.log("keypress");
};
input.onkeyup = function(){
console.log("keyup");
};
var div = document.querySelector("div");
div.onmousedown = function(){
console.log("mousedown");
};
div.onmouseup = function(){
console.log("mouseup");
};
div.onclick = function(){
console.log("click");
};
div.ondblclick = function(){
console.log("dblclick");
};
div.onmousemove = function(event){
var x = event.clientX;
var y = event.clientY;
console.log("mousemove: (" + x +" , " + y +" ) ")
};
div.onmouseover = function(){
console.log("mouseover");
};
div.onmouseout = function(){
console.log("mouseout");
};
function resize(){
var w = window.outerWidth;
var h = window.outerHeight;
console.log("resize: (" + w + " , " + h + ")");
};
function scroll(){
var x = window.pageXOffSet;
var y = window.pageYOffSet;
console.log("scroll: (" + x + " , " + y + ")");
};
}
HTML dos eventos em JQuery
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>JQuery - Eventos</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js\eventos_jquery.js"></script>
<style type="text/css">
body {
width:100px;
height: 800px;
}
#div1{
width: 400px;
height: 300px;
background-color: yellow;
}
#div2{
width: 400px;
height: 300px;
background-color: blue;
}
#div_interno{
width: 400px;
height: 300px;
margin:auto;
background-color: green;
}
</style>
</head>
<body id="body">
<form id="form1">
<input type="text" id="input1">
</form>
<form id="form2">
<input type="text" id="input2">
</form>
<div id="div1">
<div id="div_interno"></div>
</div>
<div id="div2">
<div id="div_interno"></div>
</div>
</body>
</html>
Script em JQuery
/*tratando o evento ready*/
$(document).ready(function(){
console.log("ready");
});
/*Tratando o evento resize*/
$(window).resize(function(){
var largura = $(window).width();
var altura = $(window).height();
console.log("resize: (" + largura + ", "+ altura + ")");
});
/*tratando o evento scroll*/
$(window).scroll(function(){
var x = $(window).scrollLeft();
var y = $(window).scrollTop();
console.log("Scroll: (" + x + ", " + y+ ")");
});
/*tratando o evento focus*/
$("*").focus(function(){
var tagName = this.tagName;
var id = this.id;
console.log("focus: (" +tagName+ ", #"+ id +")");
});
/*tratandoo evento focusin*/
$("*").focusin(function(){
var tagName = this.tagName;
var id = this.id;
console.log("focusin: (" +tagName+ ", #"+ id +")");
});
/*Tratando o evento blur*/
$("*").blur(function(){
var tagName = this.tagName;
var id = this.id;
console.log("blur: (" +tagName+ ", #"+ id +")");
});
/*tratando o evento focusout*/
$("*").focusout(function(){
var tagName = this.tagName;
var id = this.id;
console.log("focusout: (" +tagName+ ", #"+ id +")");
});
/*tratando o evento select*/
$("input").select(function(){
console.log("Select: "+window.getSelection()+")");
});
/*tratando o evento change*/
$("input").change(function(){
console.log("Change: ("+(this).val()+")");
});
/*tratamento o evento key*/
$("input").keydown(function(event){
console.log("keydown: ("+ event.which +")");
});
/* tratando o evento keypress */
$("input").keypress(function (event){
console.log("keypress : (" + event.which + ")");
});
/*tratando o evento keyup*/
$("input").keyup(function(event) {
console.log("keyup: (" + event.which + ")");
});
/*Tratando o evento click*/
$("#div1").click(function(event){
console.log("click: ("+ event.pageX + ", " + event.pageY + ")");
});
Eu estou seguindo a apostila Desenvolvimento Web da K19.
Seu HTML precisa estar carregado para depois conseguir setar os eventos. Então faça isso dentro do evento ready. Exemplo: https://jsfiddle.net/jzqt4h7f/
Dá uma estudada: https://www.w3schools.com/jquery/event_ready.asp
1 curtida
Cara, muito obrigado pelo esclarecimento.