考点
事件中的匿名函数,如果有一个形参e,请问这个形参e是什么
事件对象
该对象中有一个stopPropagation()方法,可以阻止事件向上级冒泡
例如:$(".son").click(function(e){代码})

如何阻止事件向上冒泡
事件对象.stopPropagation()

如何阻止标签对象的默认行为
事件对象.preventDefault()
比例,表单标签对象的submit方法会默认把表单的数据进行提交,如果我们希望阻止这个行为



同时阻止事件的冒泡与标签对象的默认行为
return false

jquery-事件冒泡_表单

用例子来说明

jquery-事件冒泡_用例_02
页面的布局

jquery-事件冒泡_用例_03

样子

jquery-事件冒泡_jquery_04

绑定事件

jquery-事件冒泡_匿名函数_05

如果点击了son
会触发本身,父级,爷级的click事件

jquery-事件冒泡_事件对象_06

jquery-事件冒泡_表单_07
jquery-事件冒泡_用例_08

即便把位置移开,点击son标签

外层也会得到对应的事件

说明,冒泡效果,不是以看到的效果为准的

是以标签布局的效果来的

试一试,利用定位让他们位置错开

点击偏移了的盒子,体验效果

阻止事件的冒泡

事件包裹的匿名函数中如果有形参。这个形参就是事件对象。

利用事件对象的一个方法来阻止。

jquery-事件冒泡_表单_09

阻止的位置添加被点击的层级

如果是子级点击,不希望事件被传递到上一级

就在子级进行阻止

如果在父级添加了同样的效果

子级的冒泡就在父级被中止了

试一试

弹框实例

jquery-事件冒泡_表单_10

阻止默认行为,例如表单的提交按钮,默认行为是提交数据,可以通过。。。。

return false 可以起到阻止默认行为和阻止冒泡的效果

jquery-事件冒泡_匿名函数_11

弹框练习

结构

jquery-事件冒泡_事件对象_12

jquery-事件冒泡_匿名函数_13
弹框效果

jquery-事件冒泡_事件对象_14

蒙版

jquery-事件冒泡_用例_15
置于最顶层
filter:alpha(opacity=30)的写法是兼容ie版本的透明度写法

效果

jquery-事件冒泡_用例_16

JQUERY

点击按钮,蒙态框会显示

jquery-事件冒泡_匿名函数_17

期望的效果

点击蒙版区域,弹框会隐藏

jquery-事件冒泡_匿名函数_18

尝试解决

给弹框的容器加上了一个消失的效果

文档被点击后
jquery-事件冒泡_事件对象_19

效果

如果点击按钮,会出现 先显示,又隐藏

原因, 冒泡了,事件

解决

jquery-事件冒泡_事件对象_20

新问题

如果点击对话框的内部,也会出现消失的现象

非预期

解决

jquery-事件冒泡_匿名函数_21

来一个关闭蒙态框的按钮

jquery-事件冒泡_表单_22

jquery-事件冒泡_匿名函数_23

jquery-事件冒泡_事件对象_24

英语

jquery-事件冒泡_表单_25

怕破给性

谣言,止于智者

如何阻止冒泡的传播

事件的匿名函数中给一个形参

这个形参就是事件对象

可以在匿函内部,调一下这个事件对象的 stopPropagation()

防止

jquery-事件冒泡_匿名函数_26

破锐闻特

pre闻特

默认的

jquery-事件冒泡_用例_27

帝佛特

preventDefault,阻止默认行为

form表单中input标签type为button与submit的区别

jquery-事件冒泡_用例_28

注意

事件(匿函)

事件方法中匿名函数的形参,第一个,就是事件对象。

事件对象现学到的有两个方法

1,阻止默认行为

2,防止冒泡