jQuery鼠标事件、键盘事件、浏览器事件

鼠标事件

1、.click( ): 点击事件

html文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>
		<p>haha 1</p>
		<p>haha 2</p>
		<p>haha 3</p>
		<p>haha 4</p>
	</body>
</html>

两种写法实现的是相同的功能，只选择其一即可
1、原生js写法

<script>
       var p=document.getElementsByTagName("p")
       for(var i=0;i<p.length;i++){
           p[i].οnclick=function(){
               alert(this.innerHTML);
           }
       }

    </script>

2、jQuery写法

<script>
       // jQuery写法
       $(function(){
           $("p").click(function(){
               alert($(this).html());
           })
       })
   </script>

效果图

2、.dblclick():双击事件

将click改成dblclick

<script>
       // jQuery写法
       $(function(){
           $("p").dblclick(function(){
               alert($(this).html());
           })
       })
   </script>

3、.hover ():鼠标停和离开

<script>
       // jQuery写法
       $(function(){
           $("p").hover(function(){
               alert($(this).html());
           })
       })
   </script>

4、.mousedown( ):鼠标按下

5、.mouseenter( ):鼠标进入元素

6、.mouseleave():鼠标离开元素

7、.mousemove( ):鼠标在元素内移动

8、.mouseout( ): 鼠标离开元素(支持事件冒泡)

9、.mouseover( ):鼠标进入元素内(支持事件冒泡 )

10、.mouseup( ):鼠标按键被释放

常用键盘按键对应代码

Backspace <--------> 8

Tab<-------->9

Clear <--------> 12

Enter<-------->13

Shift <-------->16

Control<-------->17

Alt <-------->18

Caps Lock <--------> 20

ESC <--------> 27

空格键 <--------> 32

键盘事件

1、.keydown（）

在键盘按下时被触发，但是该事件只能发送在具有焦点的元素上，所以表单元素较为适用。

2、.keypress（）

在敲击键盘时被触发，可以理解为按下并抬起同一个键。

3、.keyup（）

在按键释放时被触发，也就是按下并抬起同一个键。

这三个事件都被注册时，先触发keydown（），再被触发keypress(),只有当前两者都没有被注册的情况下，才会注册keyup()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>
		<script>
			// $(document).keydown(function(event){
			// 	alert(event.keyCode);
			// })
			
			$(document).keydown(function(event){
				alert('keydown');
			});
			$(document).keypress(function(event){
				alert('keypress');
			});
			$(document).keyup(function(event){
				alert('keyup');
			});
		</script>
	</body>
</html>

注释掉前面两个事件后

浏览器事件

1、.error（）错误事件被弃用了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>
		<img src="sd"  />
		<script>
			$(function(){
				$('img').error(function(){
					alert('出了错误');
				});
			})
		</script>
	</body>
</html>

2、.resize（）页面重置

当页面大小被改变时，会被触发

改变页面大小是给我们的顶级Windows绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
		<style>
			p{
				width:400px;
				height: 400px;
				background-color: aqua;
			}
			div{
				width: 100px;
				height: 100px;
				overflow: auto;  内容超出时设置可以加上一个滚动条
			}
		</style>
	</head>
	<body>
		<div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
		<script>
			$(window).resize(function(){
				alert('页面大小发生改变了');
			})
		</script>
	</body>
</html>

作用：我们可以知道不同的页面大小，页面布局以及初始化操作等

可以利用这个事件将这些不同都加载到这个事件中。

3、.scroll ( )滚动事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
		<style>
			p{
				width:400px;
				height: 400px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<p>hahaha</p>
		<script>
			
			$(window).scroll(function(){
				alert('哈哈哈');
			})
		</script>
	</body>
</html>

可以给Windows绑定，同时也可以给元素div绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
		<style>
			p{
				width:400px;
				height: 400px;
				background-color: aqua;
			}
			div{
				width: 100px;
				height: 100px;
				overflow: auto;  内容超出时设置可以加上一个滚动条
			}
		</style>
	</head>
	<body>
		<div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
		<script>
			
			$(window).scroll(function(){
				alert('哈哈哈');
			})
			$('div').scroll(function(){
				alert('哈哈哈');
			})
		</script>
	</body>
</html>