Few event examples

Details
Written by: Stanko Milosev
Category: jQuery
Hits: 4164

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/jquery-2.1.1.js"></script>
		<script type="text/javascript" src="/index.js"></script>
	</head>

	<body>
		<input class="myInput" placeholder="some text">
		<p/>
		<a class="myHref" href="http://www.milosev.com">Test</a>
		<div class="log"></div>
	</body>
	
</html>

JS:

window.onload = function() {
	$(".myInput").focusout(function() {
		$(".log").html($(".log").html() + " I am out of focus <br/>");
	});
	
	$(".myInput").focus(function() {
		$(".log").html($(".log").html() + " I am focused <br/>");
	});
	
	$(".myHref").mouseenter(function() {
		$(".log").html($(".log").html() + " Mouse enter <br/>");
	});
	
	$(".myHref").mouseleave(function() {
		$(".log").html($(".log").html() + " Mouse leave <br/>");
	});
	
	$(".myInput").change(function (handler) {
		$(".log").html($(".log").html() + "I am changed, and the value is: " + $(".myInput").val() + "<br/>")
	});	
	
	$(".myInput").keypress(function (handler) {
		$(".log").html($(".log").html() + "Key code: " +  handler.keyCode + "<br/>")
	});
	
	$(".myInput").on('input', $(".myInput"), function() {
		$(".log").html($(".log").html() + "Input called, and value is: " +  $(".myInput").val() + "<br/>")
	});	
}

Example download from here.