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的方法有哪些？
三组六个，阻止默认事件一组，阻止冒泡一组，阻止冒泡和剩余事件一组。
event.preventDefault() 阻止事件的默认动作。event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。event.stopPropagation() 防止事件冒泡event.isPropagationStopped()判断是否调用过 event.stopPropagation() 方法event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡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、相关知识
event.preventDefault() 阻止事件的默认动作。event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。event.stopPropagation() 防止事件冒泡event.isPropagationStopped()判断是否调用过 event.stopPropagation() 方法event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡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="/" 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 false61 })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>
