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里面自定义的事件类 ...
随机推荐
- 9.多彩的幕布layer
CCLayerCorlor bool CCLayerColor::initWithColor(const ccColor4B & color); bool CCLayerColor::init ...
- 【习题 8-12 UVA - 1153】Keep the Customer Satisfied
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 结束时间比较早的,就早点开始做. 所以,将n件事情,按照结束时间升序排. 然后对于第i件事情. 尽量把它往左排. 即t+1..t+a ...
- Dubbo学习总结（3）——Dubbo-Admin管理平台和Zookeeper注册中心的搭建
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...
- Spring 实现数据库读写分离(转)
现在大型的电子商务系统,在数据库层面大都采用读写分离技术,就是一个Master数据库,多个Slave数据库.Master库负责数据更新和实时数据查询,Slave库当然负责非实时数据查询.因为在实际的应 ...
- onvif开发实战1--总结框架搭建
Gsoap及开发框架生成: 一:gsoap下载和编译 1.下载Gsoap:地址:http://sourceforge.net/projects/gsoap2/files/gSOAP/ 2.安装: ...
- 1.3 Quick Start中 Step 6: Setting up a multi-broker cluster官网剖析（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 6: Setting up a multi-broker cluster ...
- ORA-16055: FAL request rejected
主库频繁报错如下: ORA-16055: FAL request rejected 解决办法: ALTER SYSTEM SET log_archive_dest_state_2='DEFER' ...
- Vue神之大坑处理：获取通过URL的的参数不可直接操作
比如: $router.query['isZero'] == 'false'; //不会生效,刷新页面又好使了.打印处理是蓝色的false,再次刷新字体就变浅黑了. 解决:($router.quer ...
- Zabbix 监控搭建
Zabbix官网地址:https://www.zabbix.com/download 1.服务端 1.操作前安装好Mysql数据库 配置yum源,安装部署Zabbix rpm -i http://re ...
- python学习 第六天课后总结：
<br class="Apple-interchange-newline"><div></div> python学习 第六天课后总结 ...