一.事件冒泡就是多个元素同时响应了同一个事件,前提是这些元素都绑定了这一个事件。这只是我的定义,感觉好理解些。
称它为冒泡,是因为事件会按照DOM元素的层次结构依次执行,就像水泡一样不断浮向顶端。所以称之为事件冒泡。
这个图便于理解,我用箭头来代替冒泡:
二.事件捕获与事件冒泡触发顺序相反,事件捕获从外层元素传到内层元素的。body—〉div—〉span。
jquery不支持事件捕获,不是所有的浏览器支持事件捕获。
三.通过demo来认识事件冒泡
@{Layout = null; }<!DOCTYPE html><html> <head><meta name="viewport" content="width=device-width" /><script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script><script type="text/javascript">$(function () {$("span").bind("click", function () {var text = $("#msg").html() + "<p>span元素单击事件</p>";$("#msg").html(text);});});$(function () {$("#content").bind("click", function () {var text = $("#msg").html() + "<p>div元素单击事件</p>";$("#msg").html(text);});});$(function () {$("body").bind("click", function () {var text = $("#msg").html() + "<p>body元素单击事件</p>";$("#msg").html(text);});});</script><title>BubbleEvent</title> </head> <body ><div id="content">DIV元素<span>SPAN元素</span></div><div id="msg"></div> </body> </html>
依次点击span,div,body会出现效果图:(body的点击事件只作用于当前内容所占区域,而不是整个网页区域)
四.解决事件冒泡
先认识下事件对象,在上面程式中添加一个参数event,点击span元素时,事件对象就会被创建,这个事件对象只有事件函数才能访问,事件函数处理完后
事件对象会销毁。
事件对象具有自己的属性
jquery中stopPropagation()方法可以停止事件冒泡
$(function () {$("span").bind("click", function (event) {var text = $("#msg").html() + "<p>span元素单击事件</p>";$("#msg").html(text);alert(event.type);//event类型是clickevent.stopPropagation(); //停止事件冒泡方法 });});
此时点击span元素效果:
五.阻止默认行为
网页中的元素都有自己的默认行为,例如点击a标签,会跳页,点击submit按钮会提交表单等。
事件对象提供了preventDefault()方法。可以阻止默认行为。
preventDefault()和stopPropagation()都可以用return false来代替。
六.事件对象的几个属性
event.target 获取触发事件的元素
event.pageX/event.pageY 获得光标相当于页面的x坐标和y坐标
event.which 获取鼠标的左,中,右键;键盘的按键
event.metaKey 不同的浏览器对键盘Ctrl键解释不同,jquery对其进行封装成了metaKey()方法获取键盘事件中的Ctrl键
event.originalEvent 指向原生的事件对象
注:这几个属性没有实例测试。