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. javafx clipboard

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  2. Lightoj 1127 - Funny Knapsack 【二分】

    题目链接:problem=1127">http://www.lightoj.com/volume_showproblem.php?problem=1127 题意:有n个物体(n< ...

  3. 转:Java的一道面试题----静态变量初始化过程

    public class Test{ private static Test tester = new Test(); //step 1 private static int count1; //st ...

  4. QT常用代码之加载动态库和弹出对话框

    作者:朱金灿 来源:http://blog.csdn.net/clever101 加载动态库的代码: typedef void (*Execute)(); // 定义导出函数类型 QString st ...

  5. c#的中英文混合字符串截取指定长度,startidx从0开始

    //c#的中英文混合字符串截取指定长度,startidx从0开始 by gisoracle@126.com public string getStrLenB(string str, int start ...

  6. Vue的学习--遇到的一些问题和解决方法

    包括: 1.Missing space before function parentheses 2.如何给.vue文件的页面添加css 3.如何给.vue文件页面里的元素添加监听器 4.如何为每一个页 ...

  7. windows防火墙开放zabbix端口(批处理)

    windows系统在防火墙开启的情况下,打开zabbix端口(10050与10051) 可以手动添加规则,也可以使用批处理生成. 一.下面先介绍批处理 netsh advfirewall firewa ...

  8. 【AIM Tech Round 4 (Div. 2) A】Diversity

    [链接]http://codeforces.com/contest/844/problem/A [题意] 大水题 [题解] 看看不同的个数num是不是小于k,小于k,看看len-num够不够补的 [错 ...

  9. 洛谷——U10783 名字被和谐了

    https://www.luogu.org/problem/show?pid=U10783 题目背景 众所周知,我们称g是a的约数,当且仅当g是正数且a mod g = 0. 众所周知,若g既是a的约 ...

  10. 应该知道的30个jQuery代码开发技巧

    1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var ...