专栏首页web前端-JQ事件和事件对象

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 条评论
登录 后参与评论

相关文章

  • JQuery事件

           focus()                 ------获得焦点事件

    用户3159471
  • JQuery效果

          $(selector).fadeIn(speed,callback);

    用户3159471
  • JavaScript运算符和控制语句

    语法: switch(n)  {      case 1:      执行代码块 1      break;      case 2:      执行代码块 2...

    用户3159471
  • js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 浏览器默认行为: 在form中按回车键就会提交表单;单击鼠标...

    蓓蕾心晴
  • python中的yield的简单练习

    前一段时间对python的实践并不太多,主要做一些页面的效果,还有关于pdf的打印。前面的工作算是告一段落了,后面需要拿起来python干活了。有空就写写代码实...

    the5fire
  • 小区RFID电卡的那些事儿

    炎炎夏日,很快发现每天骑车出去电动车电卡的消费惊人呀( ▼-▼ )... 环境及工具 Win xp pro sp3 M1卡破解工具 NFCGUI-Pro.ex...

    FB客服
  • 伪基站与网络钓鱼的结合利用测试及结果分析

    ? 1.FreeBuf科普 “伪基站”即假基站,设备一般由主机和笔记本电脑组成,通过短信群发器、短信发信机等相关设备能够搜取以其为中心、一定半径范围内的手机卡...

    FB客服
  • 资源分享(有岗位,有组织,还有茶)

    用户2196567
  • 阿里收购饿了么,开始点燃新零售时代的线上战火

    孟永辉
  • MySQL分布式(XA)事务

    存储引擎的事务特性能够保证在存储引擎级别实现ACID。而分布式事务则让存储引擎级别的ACID可以扩展到数据库层面,甚至可以扩展到多个数据库之间–这需要两阶段提交...

    Java架构师历程

扫码关注云+社区

领取腾讯云代金券