1 事件
一 .鼠标事件
1.ready（）页面载入事件：载入文档节点
2 click（）熟悉的单击事件
3 dbclick（）双击事件
4 mousedown() /mouseup() 鼠标按下和松开事件
5 mouseover（）/mouseout() 鼠标移入和移出事件
6 mouseenter（）/mouseleave() 鼠标移入移出事件
//mouseover()/mouseout()和mouseenter（）/mouseleave()的区别
首先来了解一下事件冒泡和捕获
事件冒泡：内部事件先触发，然后在触发外部事件
事件捕获：外部事件先被触发，然后在触发内部元素
mouseover（）/mouseout() ：鼠标移入“所选元素以及后代都会触发”
mouseenter（）/mouseleave()：鼠标移入“所选元素”才会触发，如果鼠标移入所选元素的后代时，不会触发（增加阻止事件冒泡功能）
<body>
<div class="div1">
<div class="div2"></div>
</div>
<p>mouseover事件 <span id="num1"></span>次</p>
<p>mouseenter事件 <span id="num2"></span>次</p>
<script>
var count1=0;
var count2=0;
$(‘.div1‘).mouseover(function(){
$(‘#num1‘).text(count1+=1) //通过记录次数来看出区别，无论移入哪个元素都会加1
})
$(‘.div1‘).mouseenter(function(){
$(‘#num2‘).html(count2+=1)//只有移入指定元素才会加1
})
</script>
7 hover鼠标悬停事件 有两个参数（方法），鼠标一定到指定对象以及移出时会触发
二 键盘事件
1 keydown 键盘按下时触发的事件
2 keyup 键盘松开一瞬间触发的事件
3 keypress 键盘按下松开整个过程触发的事件
//keydown（）和keypress区别
keydown（）按下任意键都会触发，但keypress（）事件只在按下键盘中任意字符键（A-Z）时触发，功能键不会触发（如shift ctrl 等）
4 event.which 指示按下的哪个键
1 <script>
2 $(document).keydown(function(e){
3 alert(e.which)
4 })
5 $(document).keyup(function(){
6 alert("1111")
7 })
8 $(document).keypress(function(e){
9 alert(e.which)
10 })
11 </script>
三 表单事件
1 focus () :获得焦点事件
2 blur()： 失去焦点事件
3 focusin() ：获得焦点事件
4 focusout() :失去焦点事件
5 change() :元素发生改变时，触发事件
6 select（）:当选中单行文本text或者多行文本areatext时，触发事件
7 submit() :表单提交事件
//focus()和focusin() 的区别
focusin可以在父元素上检测子元素获得焦点的情况 而focusout可以在父元素上检测子元素失去焦点情况
四 其他事件
1 scroll（）滚动滚动条时触发的事件
2 resize（）当调整窗口大小时触发的事件
//小案例（当滚动到一定高度出现搜索菜单）
.bar{
width: 100%;
height: 50px;
background: red;
position:fixed;
top:0;
display: none;
}
<div class="bar"></div>
$(function(){
$(window).scroll(function(){
str=$(this).scrollTop();
if(str>1000){
$(‘.bar‘).css(‘display‘,‘block‘)
}
//滚动条的距离scrollTop()和scrollLeft()
})
2 事件对象
JQ在事件函数中默认传递了参数event对象，
一 event对象属性
1 event .type 描述事件的类型
2 event.target 触发该事件的DOM元素
3 event.currentTarget 在事件冒泡阶段中的当前DOM元素，等同于 this
4 event.pageX/event.pageY 鼠标相对于文件左侧和顶部的位置 //会随着滚动条变化而变化
//screenX/screenY 获取显示器屏幕位置的坐标 //整个屏幕的高度 不会随着滚动条变化而变化
//clientX/clientY 获取相当于页面视口的坐标 //除去上下窗口 不会随着滚动条变化而变化
<script src="jquery-3.1.1.min.js"></script>
<title>client screen page</title>
<style>
body{
height: 3000px;
font-family: "微软雅黑";
margin:0px;
padding:0px;
}
#div1{
width:300px;
height: 200px;
border:1px solid red;
position: fixed;
top:0;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
$(document).mousemove(function(e){
$(‘#div1‘).html("pageY："+e.pageY+"<br/>"+"clientY："+e.clientY+"<br/>"+"screenY："+e.screenY)
})
</script>
</body>
</html>
5 event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
event.which将event.keyCode 和 event.charCode标准化了。推荐用event.which来监视键盘输入。
在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值（相当于event.button）。以下是主要的鼠标按钮映射代码对应表
|
Event.which属性值 |
对应的鼠标按钮 |
|
1 |
鼠标左健 |
|
2 |
鼠标中健（滚轮键） |
|
3 |
鼠标右健 |
6 event.preventDefault() 阻止事件的默认行为
7 event.stopPropagation() 防止冒泡事件
原文地址：https://www.cnblogs.com/qianqian-it/p/9628319.html