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里面自定义的事件类 ...
随机推荐
- HDU 1716 排列2
排列2 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- js 判断是不是空、值是否存在
判断数组是否存在某个值: Array.indexOf(val) > -1 //存在 (缺陷:一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观.二 ...
- SASS常用方法
cnpm install --save-dev sass-loader //sass-loader依赖于node-sass cnpm install --save-dev node-sass //实现 ...
- HDU——T 1573 X问题
http://acm.hdu.edu.cn/showproblem.php?pid=1573 Time Limit: 1000/1000 MS (Java/Others) Memory Limi ...
- Centos6.4安装opennebula
Centos6.4安装opennebula #安装163源 http://mirrors.163.com/.help/CentOS6-Base-163.repo #安装epel源 wget http: ...
- apache2 虚拟机多用户多站点设置 mpm-itk
MPM设置 https://bbs.csdn.net/topics/390479795/ vim /opt/lampp/etc/extra/httpd-ssl.conf vim /opt/lampp/ ...
- Javascript 继承和克隆
个人总结: call 继承的是父类私有 prototype 继承的父类公有 create 可以将公有或私有继承到子类上去(克隆) for in 克隆 不管公有还是私有的都克隆成私有的 1.原型继承:将 ...
- vue中添加favicon
基于vue-cli 2 首先将favicon.ico图片放在根目录下,通过以下两种方法使其显示正确. 方法一:修改index.html文件 <link rel="shortcut ic ...
- BZOJ4372: 烁烁的游戏(动态点分治)
Description 背景:烁烁很喜欢爬树,这吓坏了树上的皮皮鼠.题意:给定一颗n个节点的树,边权均为1,初始树上没有皮皮鼠.烁烁他每次会跳到一个节点u,把周围与他距离不超过d的节点各吸引出w只皮皮 ...
- BZOJ1396: 识别子串（后缀自动机，线段树）
Description Input 一行,一个由小写字母组成的字符串S,长度不超过10^5 Output L行,每行一个整数,第i行的数据表示关于S的第i个元素的最短识别子串有多长. Sample I ...