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>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9278557.html

js进阶课程 12-9 jquery的事件对象event的方法有哪些？相关推荐

  1. 视频教程-Three.js进阶课程-HTML5/CSS

    Three.js进阶课程 长期从事3D方面的工作,拥有丰富的webgl技术经验,基于webgl技术实现产品在线预览.室内漫游.可视化等项目 郭龙帮 ¥45.00 立即订阅 扫码下载「CSDN程序员学院 ...

  2. jquery的事件对象

    jquery的事件对象就是js事件对象的一个封装,就是做了一个兼容性的封装. screenX和screenY 对应屏幕最左上角的值 clientX和clientY 距离页面左上角的位置(忽略滚动条) ...

  3. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

  4. js的三大家族(offset/scroll/client)和一个事件对象(event)///正则

                  一  offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...

  5. JS事件对象 (event)

    #事件对象 (event) div.onclick = function(event){         console.log(event);         let e = event||wind ...

  6. JavaScript：事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章 DOM操作详解 中已经讲过事件的概 ...

  7. [回顾]事件对象——event

    问题由来 经常在阅读代码时候发现这样的函数 var btn = document.getElementById('btn'); btn.onclick = function (e) {...一些操作: ...

  8. 事件对象(event)

    <div>111</div>var div = document.querySelector('div'); div.onclick = function(event) {}; ...

  9. javaScript中的事件对象event是怎样

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

最新文章

  1. C# 常用正责表达式
  2. c语言运动会成绩统计报告,C语言程序设计运动会成绩统计系统1研究报告.doc
  3. 多语言切换jquery.i18n.min.js
  4. Flask-Login用户登陆
  5. ALEIDoc EDI(5)--Inbound Function
  6. Kubernetes 凭什么成了云原生应用底座？
  7. Ubuntu中安装和卸载apache2
  8. 《Thinking in java》 读了个开头
  9. （93）Verilog HDL系统函数和任务：$fread
  10. 08-08 性能测试--分布式
  11. 网易云解析接口PHP源码,网易云音乐直链解析API源代码^-^
  12. Php-SPL库中的迭代器类详解
  13. excel不使用科学计数法
  14. 电脑录屏方法qq录屏
  15. Browserslist: caniuse-lite is outdated
  16. 4 篇 NAR | 生物大数据时代，如何做好数据管理和再利用，发IF10+的数据库文章？...
  17. Android studio 虚拟机启动不了Staring AVD
  18. 测试微信号连接的开发的步骤
  19. NFT Insider #54：BreederDAO将开启公募，游戏巨头万代南梦宫、育碧入局元宇宙
  20. ZYNQ-ZedBoard 上运行桌面 LINUX

热门文章

  1. 编程思想之多线程与多进程——以操作系统的角度述说线程与进程
  2. Android使用iconfont
  3. Android NDK开发之旅(2)：一篇文章搞定Android Studio中使用CMake进行NDK/JNI开发
  4. Android之如何优雅的管理ActionBar
  5. html点击散点图的点显示一个文本,javascript – D3.js中的简单散点图示例？
  6. 58.最全正则表达式教程,最好正则表达式教程
  7. tail -f 和 -F 的用法
  8. Spring之数据库操作
  9. 蓝桥杯--2012--取球游戏
  10. WebGIS空间数据请求访问机制