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():鼠标移入“所选元素”才会触发,如果鼠标移入所选元素的后代时,不会触发(增加阻止事件冒泡功能)

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JavaEdge

CSS 全解析实战(二)-HTML基础强化1 HTML常见元素和理解(1)2 HTML常见元素和理解(2)3 HTML常见元素和理解(3)4 HTML版本5 元素分类6 嵌套关系

781
来自专栏前端知识分享

第141天:前端开发中浏览器兼容性问题总结(二)

在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:m...

1972
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

3438
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:用MenuView控件仿钉钉APP的首页菜单

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

1342
来自专栏超然的博客

自定义按钮~自适应布局~常见bug

1832
来自专栏分享达人秀

屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组...

2036
来自专栏自动化测试实战

html——css基础

上一节我们讲了display的inline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: le...

4745
来自专栏前端技术总结

实例详解:Flex布局(二)

在之前的一篇文章:详解CSS的Flex布局中介绍了CSS的Flex布局的基本知识,包括flex-container的6个属性,以及flex-item的6个属性。...

1.4K42
来自专栏HTML5学堂

SVG - 动画制作

SVG - 动画制作 HTML5学堂:SVG - 动画制作。上一篇文章讲解了SVG的基本属性,大家能够利用SVG的基本属性进行绘制图像,那么如何让绘制好的图像动...

54310
来自专栏林德熙的博客

win10 uwp 圆角按钮

本文讲的是如何做圆角按钮,我们在UWP本来的按钮都是矩形,圆角Radius没有,所以本文就用简单方法去做圆角按钮。

1451

扫码关注云+社区

领取腾讯云代金券