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的方法有哪些？
三组六个，阻止默认事件一组，阻止冒泡一组，阻止冒泡和剩余事件一组。
- 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、代码
<!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的方法有哪些？的更多相关文章
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件
js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型. event.target 触发该事件的 DOM 元素. ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- js进阶课程ajax简介（ajax是浏览器来实现的）
js进阶课程ajax简介(ajax是浏览器来实现的) 一.总结 1.ajax使用需要服务器支持,比如phpstudy 2.ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest, ...
- js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...
- jQuery事件对象event的属性和方法
事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...
- 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡
jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...
- Javascript和jquery事件--事件对象event
1. 事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...
- 第二十六课：jQuery对事件对象的修复
因为原生的event对象,在不同浏览器下,有不同的属性和方法,因此需要用jQuery进行兼容. jQuery在这里分两步走,首先创建一个伪事件类jQuery.Event(jQuery里面自定义的事件类 ...
随机推荐
- POJ 2039 Floyd
句意理解题 解释输入好啦: 第一行n个数 m场电影 随后m行 每行的第一个数 代表 有k奶牛在这个电影中出现过 随后k个数 是奶牛的编号 如果两头奶牛在同一个电影中出现过 相互度为1 奶牛们的相互度可 ...
- Tachyon的配置详解
Tachyon的配置 Tachyon环境变量 Tachyon通用配置 TachyonMaster配置 TachyonWorker配置 用户配置 1 Tachyon的配置 这里以0.5.0版本为例,介绍 ...
- PHP生成RSS报
<?php$sql="select * from wx_zimi ";$res=$dbs->query($sql);$arr=array();while($o=$dbs ...
- [置顶]
Docker学习总结（3）——Docker实战之入门以及Dockerfile（三）
应用镜像 csphere/wordpress:4.2 # cd docker-training/wordpress/ # ls -a . license.txt wp-config-sample.ph ...
- 继承AbstractRoutingDataSource再通过AOP实现动态数据源切换（转）
关于AbstractRoutingDataSource我在研究开源中国的开源项目时候才发现,好奇的看了一下代码发现自己看不明白,大概就看懂了Spring AOP切面这里,根据注释作者的意思是通过这个可 ...
- Repractise基础篇：Web应用开发七日谈
Repractise基础篇:Web应用开发七日谈 本来想的仅仅是画一个例如以下的七日图来说说Web开发的.随后又想了想这似乎是一个非常棒的Web开发相关的知识介绍.应用开发是一个非常有意思的循环,多数 ...
- 31.Node.js 常用工具 util
转自:http://www.runoob.com/nodejs/nodejs-module-system.html util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaS ...
- 28.Node.js 函数和匿名函数
转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在JavaScript中,一个函数可以作为另一个函数的参数.我们可以先定义一个函数, ...
- 使用Notepad++的XML Tools插件格式化XML文件
转自“”:https://blog.csdn.net/qq_36279445/article/details/79803310 1. 安装XML Tools插件 (1) 通过网址http://sour ...
- 深入理解Java内存模型--转载
原文地址:http://www.infoq.com/cn/articles/java-memory-model-1 并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之 ...