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里面自定义的事件类 ...
随机推荐
- javafx clipboard
public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...
- Lightoj 1127 - Funny Knapsack 【二分】
题目链接:problem=1127">http://www.lightoj.com/volume_showproblem.php?problem=1127 题意:有n个物体(n< ...
- 转：Java的一道面试题----静态变量初始化过程
public class Test{ private static Test tester = new Test(); //step 1 private static int count1; //st ...
- QT常用代码之加载动态库和弹出对话框
作者:朱金灿 来源:http://blog.csdn.net/clever101 加载动态库的代码: typedef void (*Execute)(); // 定义导出函数类型 QString st ...
- c#的中英文混合字符串截取指定长度,startidx从0开始
//c#的中英文混合字符串截取指定长度,startidx从0开始 by gisoracle@126.com public string getStrLenB(string str, int start ...
- Vue的学习--遇到的一些问题和解决方法
包括: 1.Missing space before function parentheses 2.如何给.vue文件的页面添加css 3.如何给.vue文件页面里的元素添加监听器 4.如何为每一个页 ...
- windows防火墙开放zabbix端口（批处理）
windows系统在防火墙开启的情况下,打开zabbix端口(10050与10051) 可以手动添加规则,也可以使用批处理生成. 一.下面先介绍批处理 netsh advfirewall firewa ...
- 【AIM Tech Round 4 (Div. 2) A】Diversity
[链接]http://codeforces.com/contest/844/problem/A [题意] 大水题 [题解] 看看不同的个数num是不是小于k,小于k,看看len-num够不够补的 [错 ...
- 洛谷——U10783 名字被和谐了
https://www.luogu.org/problem/show?pid=U10783 题目背景 众所周知,我们称g是a的约数,当且仅当g是正数且a mod g = 0. 众所周知,若g既是a的约 ...
- 应该知道的30个jQuery代码开发技巧
1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var ...