jq当中的事件和事件对象

1 事件

一 .鼠标事件

1.ready（）页面载入事件：载入文档节点

2 click（）熟悉的单击事件

3 dbclick（）双击事件

4 mousedown() /mouseup() 鼠标按下和松开事件

5 mouseover（）/mouseout() 鼠标移入和移出事件

6 mouseenter（）/mouseleave() 鼠标移入移出事件

//mouseover()/mouseout()和mouseenter（）/mouseleave()的区别

首先来了解一下事件冒泡和捕获

事件冒泡：内部事件先触发，然后在触发外部事件

事件捕获：外部事件先被触发，然后在触发内部元素

mouseover（）/mouseout() ：鼠标移入“所选元素以及后代都会触发”

mouseenter（）/mouseleave()：鼠标移入“所选元素”才会触发，如果鼠标移入所选元素的后代时，不会触发（增加阻止事件冒泡功能）

mouseover事件 次

mouseenter事件 次

7 hover鼠标悬停事件 有两个参数（方法），鼠标一定到指定对象以及移出时会触发

二 键盘事件

1 keydown 键盘按下时触发的事件

2 keyup 键盘松开一瞬间触发的事件

3 keypress 键盘按下松开整个过程触发的事件

//keydown（）和keypress区别

keydown（）按下任意键都会触发，但keypress（）事件只在按下键盘中任意字符键（A-Z）时触发，功能键不会触发（如shift ctrl 等）

4 event.which 指示按下的哪个键

1
三 表单事件

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;
}

$(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>

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()  防止冒泡事件