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>
 

js进阶课程 12-9 jquery的事件对象event的方法有哪些?的更多相关文章

  1. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  2. js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

    js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型.        event.target 触发该事件的 DOM 元素. ...

  3. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  4. js进阶课程ajax简介(ajax是浏览器来实现的)

    js进阶课程ajax简介(ajax是浏览器来实现的) 一.总结 1.ajax使用需要服务器支持,比如phpstudy 2.ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest, ...

  5. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

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

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

  7. 第一百七十节,jQuery,事件对象,event 对象,默认行为,冒泡

    jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...

  8. Javascript和jquery事件--事件对象event

    1.  事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...

  9. 第二十六课:jQuery对事件对象的修复

    因为原生的event对象,在不同浏览器下,有不同的属性和方法,因此需要用jQuery进行兼容. jQuery在这里分两步走,首先创建一个伪事件类jQuery.Event(jQuery里面自定义的事件类 ...

随机推荐

  1. POJ 2039 Floyd

    句意理解题 解释输入好啦: 第一行n个数 m场电影 随后m行 每行的第一个数 代表 有k奶牛在这个电影中出现过 随后k个数 是奶牛的编号 如果两头奶牛在同一个电影中出现过 相互度为1 奶牛们的相互度可 ...

  2. Tachyon的配置详解

    Tachyon的配置 Tachyon环境变量 Tachyon通用配置 TachyonMaster配置 TachyonWorker配置 用户配置 1 Tachyon的配置 这里以0.5.0版本为例,介绍 ...

  3. PHP生成RSS报

    <?php$sql="select * from wx_zimi ";$res=$dbs->query($sql);$arr=array();while($o=$dbs ...

  4. [置顶] Docker学习总结(3)——Docker实战之入门以及Dockerfile(三)

    应用镜像 csphere/wordpress:4.2 # cd docker-training/wordpress/ # ls -a . license.txt wp-config-sample.ph ...

  5. 继承AbstractRoutingDataSource再通过AOP实现动态数据源切换(转)

    关于AbstractRoutingDataSource我在研究开源中国的开源项目时候才发现,好奇的看了一下代码发现自己看不明白,大概就看懂了Spring AOP切面这里,根据注释作者的意思是通过这个可 ...

  6. Repractise基础篇:Web应用开发七日谈

    Repractise基础篇:Web应用开发七日谈 本来想的仅仅是画一个例如以下的七日图来说说Web开发的.随后又想了想这似乎是一个非常棒的Web开发相关的知识介绍.应用开发是一个非常有意思的循环,多数 ...

  7. 31.Node.js 常用工具 util

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaS ...

  8. 28.Node.js 函数和匿名函数

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数, ...

  9. 使用Notepad++的XML Tools插件格式化XML文件

    转自“”:https://blog.csdn.net/qq_36279445/article/details/79803310 1. 安装XML Tools插件 (1) 通过网址http://sour ...

  10. 深入理解Java内存模型--转载

    原文地址:http://www.infoq.com/cn/articles/java-memory-model-1 并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之 ...