zoukankan      html  css  js  c++  java
  • js进阶课程 12-9 jquery的事件对象event的方法有哪些?

    js进阶课程 12-9 jquery的事件对象event的方法有哪些?

    一、总结

    一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组。

    1、事件的默认动作指什么?

    比如点a标签跳转,比如点submit提交

    2、如何阻止元素的默认事件?

    event.preventDefault() 阻止事件的默认动作。

    26         //阻止默认行为
    27         $('#aid').click(function(e){
    28             //e.preventDefault()
    29             alert(e.isDefaultPrevented())
    30         })

    3、如何查看是否阻止和元素的默认事件?

    event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。

    26         //阻止默认行为
    27         $('#aid').click(function(e){
    28             //e.preventDefault()
    29             alert(e.isDefaultPrevented())
    30         })

    4、事件冒泡是由内而外还是由外而内?

    冒泡啊冒泡,用脚趾头想就知道冒泡是从内向外,所以事件冒泡也是从内向外。

    5、如何阻止事件冒泡?

    event.stopPropagation() 防止事件冒泡

    43         $('#pid').click(function(e){
    44             e.stopPropagation()
    45             alert('p')
    46         })

    6、event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡是什么意思?

    事件不会再冒泡了,并且,这个元素的其它事件也不再执行了

    32         $('#aid').click(function(e){
    33             //e.stopPropagation()
    34             // alert('a')
    35             // alert(e.isPropagationStopped())
    36             e.stopImmediatePropagation()
    37              alert('a1')
    38              alert(e.isImmediatePropagationStopped())
    39         })

    7、事件对象event的方法如何使用?

    把event直接传进来,然后直接调用它的方法就可以了

    和event的属性一样,都是event直接点就好了

    26         //阻止默认行为
    27         $('#aid').click(function(e){
    28             //e.preventDefault()
    29             alert(e.isDefaultPrevented())
    30         })

    8、event的方法一般都带参数么?

    一般都是不带参数的

    9、event的方法有哪些?

    三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组。

    1. event.preventDefault() 阻止事件的默认动作。
    2. event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
    3. event.stopPropagation() 防止事件冒泡
    4. event.isPropagationStopped()判断是否调用过 event.stopPropagation() 方法
    5. event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡
    6. event.isImmediatePropagationStopped() 检测 event.stopImmediatePropagation() 是否被调用过。

    10、同时阻止了冒泡和默认事件的两种方法是什么?

    return false

    event.preventDefault() + event.stopPropagation()

    55     //同时阻止事件冒泡和默认行为
    56         $('#aid').click(function(e){
    57             // e.stopPropagation()
    58             // e.preventDefault()
    59             alert('a')
    60             return false
    61         })

    11、在js事件函数中return false是什么意思?

    同时阻止了元素的冒泡和默认事件

    55     //同时阻止事件冒泡和默认行为
    56         $('#aid').click(function(e){
    57             // e.stopPropagation()
    58             // e.preventDefault()
    59             alert('a')
    60             return false
    61         })

    二、jquery的事件对象event的方法有哪些

    1、相关知识

    1. event.preventDefault() 阻止事件的默认动作。
    2. event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
    3. event.stopPropagation() 防止事件冒泡
    4. event.isPropagationStopped()判断是否调用过 event.stopPropagation() 方法
    5. event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡
    6. event.isImmediatePropagationStopped() 检测 event.stopImmediatePropagation() 是否被调用过。
     

    2、代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <style>
     4 </style>
     5 <head>
     6     <meta charset="UTF-8">
     7     <title>演示文档</title>
     8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
     9     <style type="text/css">
    10         input{width: 100px;height: 30px;}
    11         div{width: 200px;height: 200px;border:1px solid green;}
    12         #pid{width: 150px;height: 150px;border:1px solid blue;margin:25px;}
    13         #aid{width: 100px;height: 50px;border:1px solid red;margin:25px;display: block;}
    14       </style>
    15 </style>
    16 </head>
    17 <body>
    18 <h3>jQuery事件对象</h3>
    19 <div id="div1">
    20     <p id="pid"><a id="aid" href="http://www.51_zxw.net/" target="_blank">51zxw</a></p>
    21 </div>
    22 <input id="btn1" type="button" value="事件对象">
    23 <script type="text/javascript">
    24     $(function(){
    25         /*
    26         //阻止默认行为
    27         $('#aid').click(function(e){
    28             //e.preventDefault()
    29             alert(e.isDefaultPrevented())
    30         })
    31         
    32         $('#aid').click(function(e){
    33             //e.stopPropagation()
    34             // alert('a')
    35             // alert(e.isPropagationStopped())
    36             e.stopImmediatePropagation()
    37              alert('a1')
    38              alert(e.isImmediatePropagationStopped())
    39         })
    40         $('#aid').click(function(e){
    41              alert('a2')
    42         })
    43         $('#pid').click(function(e){
    44             e.stopPropagation()
    45             alert('p')
    46         })
    47         $('#div1').click(function(e){
    48             e.stopPropagation()
    49             alert('div')
    50         })
    51         $(document).click(function(){
    52             alert('document')
    53         })
    54     */
    55     //同时阻止事件冒泡和默认行为
    56         $('#aid').click(function(e){
    57             // e.stopPropagation()
    58             // e.preventDefault()
    59             alert('a')
    60             return false
    61         })
    62         $('#pid').click(function(e){
    63             alert('p')
    64         })
    65         $('#div1').click(function(e){
    66             alert('div')
    67         })
    68     })
    69 </script>
    70 </body>
    71 </html>
     
  • 相关阅读:
    将字符串按指定间隔分隔
    C#汉字转化为拼音
    Silverlight客户端分页 DataPager控件的使用
    c# EnumUtil
    【AS3代码】通过两者间的距离,检测是否碰撞
    【AS3代码】遮罩用法
    【AS3代码】XML操作
    【AS3代码】数组知识
    【AS3代码】深度的设置
    【AS3代码】模仿现实世界中(地球重力)的甩球游戏
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9278557.html
Copyright © 2011-2022 走看看