jquery之事件函数

jqurey的事件函数
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script src="../../document/lib/jquery-3.2.1.min.js"></script>
	<title>jquery event02</title>
	<style>
		
	</style>
</head>
<body>
	<h2>jquery event</h2>
	<div style="width:100%;background-color:#dcdcdc">
		<h3>事件函数</h3>
		<p><input type="text" /> <span>focusout fire</span></p>
		<p><input type="password" /> <span>focusout fire</span></p>
		<span id="spanId01">记录窗口大小调整的次数</span>
		<button>btn</button>

	<script type="text/javascript">
	// 事件
	// blur([[data],fn])
	// $("p").blur( function () { alert("Hello World!"); } );

	// change([[data],fn])
	// $("input[type='text']").change( function() {
	//   // 这里可以写些验证代码
	// });

	// click([[data],fn])
	// $("p").click( function () { $(this).hide(); });

	// dblclick([[data],fn])
	// $("p").dblclick( function () { alert("Hello World!"); });

	// error([[data],fn]) 当元素遇到错误（没有正确载入）时，发生 error 事件。

	// 在服务器端记录JavaScript错误日志:
	// $(window).error(function(msg, url, line){
	// 	jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
	// });

	// 隐藏JavaScript错误:
	// $(window).error(function(){
	// 	return true;
	// });

	// 给你IE的用户隐藏无效的图像:
	// $("img").error(function(){
	// 	$(this).hide();
	// });

	// focus([[data],fn])
	// $(document).ready(function(){
	// 	$("#login").focus();
	// });

	// 设置文本框不可用
	// $("input[type=text]").focus(function(){
	// 	this.blur();
	// });

	// focusin([data],fn) 当元素获得焦点时，触发 focusin 事件。

	// $("p").focusin(function() {
	// 	$(this).find("span").css('display','inline').fadeOut(1000);
	// });

	// focusout([data],fn)
	// $("p").focusout(function() {
	// 	$(this).find("span").css('display','inline').fadeOut(1000);
	// });
	
	// keydown([[data],fn])
	// $(window).keydown(function(event){
		// switch(event.keyCode) {
	    // ...
	    // 不同的按键可以做不同的事情
	    // 不同的浏览器的keycode不同
	    // 更多详细信息:     http://unixpapa.com/js/key.html
	    // 常用keyCode： 空格 32   Enter 13   ESC 27
		// }
	// });

	// keypress([[data],fn]) 与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件

	// keyup([[data],fn]) 
	// 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
	// 注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

	// $("input").keyup(function(){
	// 	$("input").css("background-color","#D6D6FF");
	// });

	// mousedown([[data],fn]) 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
	// $("button").mousedown(function(){
		// $("p").slideToggle();
	// });

	// mouseenter([[data],fn])
	// 当鼠标指针进入（穿过）元素时，改变元素的背景色：
	// $("p").mouseenter(function(){
	// 	$("p").css("background-color","yellow");
	// });

	// mouseleave([[data],fn])
	// 当鼠标指针离开元素时，改变元素的背景色：：
	// $("p").mouseleave(function(){
	//   $("p").css("background-color","#E9E9E4");
	// });

	// mousemove([[data],fn])
	// 获得鼠标指针在页面中的位置：
	// $(document).mousemove(function(e){
	// 	$("span").text(e.pageX + ", " + e.pageY);
	// });

	// mouseout([[data],fn])
	// 当鼠标从元素上移开时，改变元素的背景色：
	// $("p").mouseout(function(){
	//   $("p").css("background-color","red");
	// });

	// mouseover([[data],fn])
	// 当鼠标指针位于元素上方时时，改变元素的背景色：
	// $("p").mouseover(function(){
	//   $("p").css("background-color","yellow");
	// });

	// mouseup([[data],fn])
	// 当松开鼠标按钮时，隐藏或显示元素：
	// $("button").mouseup(function(){
	// 	$("p").slideToggle();
	// });

	// resize([[data],fn])
	// 让人每次改变页面窗口的大小时很郁闷的方法:
	// $(window).resize(function(){
	//   alert("Stop it!");
	// });
	// var x = 0;
	// $(window).resize(function() {
	// 	$('#spanId01').text(x+=1);
	// });

	// scroll([[data],fn])
	// 当用户滚动指定的元素时，会发生 scroll 事件。
	// 当页面滚动条变化时，执行的函数:
	// $(window).scroll( function() { alert("say hello") } );

	// 对元素滚动的次数进行计数：
	// var x = 0;
	// $("div").scroll(function() {
	// 	$("span").text(x+=1);
	// });

	// select([[data],fn]) 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
	// 触发所有input元素的select事件:
	// $("input").select();
	// 当文本框中文本被选中时执行的函数:
	// $(":text").select( function () { alert("say hello") } );

	// submit([[data],fn])
	// 当提交表单时，会发生 submit 事件。该事件只适用于表单元素。

	// 提交本页的第一个表单:
	// $("form:first").submit();

	// 如果你要阻止表单提交:
	// $("form").submit( function () {
	//   return false;
	// } );
 
	// unload([[data],fn])  jQuery 版本 1.8 中被废弃。
	// 在当用户离开页面时，会发生 unload 事件。
	// 具体来说，当发生以下情况时，会发出 unload 事件：
	// •点击某个离开页面的链接
	// •在地址栏中键入了新的 URL
	// •使用前进或后退按钮
	// •关闭浏览器
	// •重新加载页面
	
	// 不起作用
	// $(window).beforeunload(function () { $("body").append("<h1>Bye now</h1>"); } );

	// 不起作用
	// $(window).unload(function(){
	// 	$("body").append("<h1>Bye now</h1>");
	// });

	// 不起作用
	// $(window).unload(function(event){
	// 	var message = "I'm really going to miss you if you go.";
	// 	event.returnValue = message;
	// 	return message;
	// });

	// 不起作用
	// window.onunload = function(){
	// 	alert("unload is work");
	// }

	// 会起作用
	// window.onbeforeunload = function(){
	// 	return "onbeforeunload is work";
	// }
	</script>
	</div>
</body>
</html>
猜你喜欢
