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

时间:2022-03-21 05:47:21

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、代码

 <!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
div{width: 200px;height: 200px;border:1px solid green;}
#pid{width: 150px;height: 150px;border:1px solid blue;margin:25px;}
#aid{width: 100px;height: 50px;border:1px solid red;margin:25px;display: block;}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<div id="div1">
<p id="pid"><a id="aid" href="http://www.51_zxw.net/" target="_blank">51zxw</a></p>
</div>
<input id="btn1" type="button" value="事件对象">
<script type="text/javascript">
$(function(){
/*
//阻止默认行为
$('#aid').click(function(e){
//e.preventDefault()
alert(e.isDefaultPrevented())
}) $('#aid').click(function(e){
//e.stopPropagation()
// alert('a')
// alert(e.isPropagationStopped())
e.stopImmediatePropagation()
alert('a1')
alert(e.isImmediatePropagationStopped())
})
$('#aid').click(function(e){
alert('a2')
})
$('#pid').click(function(e){
e.stopPropagation()
alert('p')
})
$('#div1').click(function(e){
e.stopPropagation()
alert('div')
})
$(document).click(function(){
alert('document')
})
*/
//同时阻止事件冒泡和默认行为
$('#aid').click(function(e){
// e.stopPropagation()
// e.preventDefault()
alert('a')
return false
})
$('#pid').click(function(e){
alert('p')
})
$('#div1').click(function(e){
alert('div')
})
})
</script>
</body>
</html>