Duvida sobre eventos em JS/JQuery

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:

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…

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.

4 Respostas

Topicos relacionados