微信扫一扫打赏支持

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>

 

 

 
posted @ 2018-07-07 21:47  范仁义  阅读(283)  评论(0)  编辑  收藏  举报