事件冒泡 - 云中烛火

公告

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7 </style>
 8 </head>
 9 <body>
10     <div id="content">
11         外层div元素<br>
12         <span>内层span元素</span><br>
13         外层div
14     </div>
15     <br/>
16     <div id="msg"></div>
17 
18 <script type="text/javascript" src="jquery.js"></script>
19 <script type="text/javascript">
20 $(function(){
21     //为span元素绑定click事件
22     $("span").bind("click",function(){
23         var txt = $("#msg").html() +"<p>内层span元素被单击.</p>";
24         $("#msg").html(txt);
25     });
26     
27     //为div元素绑定click事件
28     $("#content").bind("click",function(){
29         var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
30         $("#msg").html(txt);
31     });
32     
33     //为body元素绑定click事件
34     $("body").bind("click",function(){
35         var txt = $("#msg").html()+"<p>body元素被单击</p>";
36         $("#msg").html(txt);
37     });
38 });
39 </script>
40 </body>
41 </html>

当单击内部<span>元素，即触发<span>元素的click事件时，会输出3条记录，如图：

只单击内部<span>元素，就会触发外部<div>元素和<body>元素上绑定的click事件，这是由事件冒泡引起的

在单击<span>元素的同时，也单击了包括<span>元素的<div>元素和包含<div>元素的<body>元素，并且每一个元素都会按照特定的顺序响应click事件。

　　元素的click事件会按照以下顺序“冒泡"

<span>
<div>
<body>

停止事件冒泡

　　停止事件冒泡可以组织事件中其他对象的事件处理函数被执行。在jQuery中提供stopPropagation()方法来停止冒泡事件

$("span").bind("click",function(event){        //event：事件对象
        var txt = $("#msg").html() +"<p>内层span元素被单击.</p>";
        $("#msg").html(txt);
        event.stopPropagation();//可以换为return false
    });

当单击<span>元素时，只会触发<span>元素上的click事件，而不会触发<div>元素和<body>元素的click事件。可以用同样的方法解决<div>元素上的冒泡问题。

阻止默认行为

　　网页中的元素有自己默认的行为，例如：单击超链接后会跳转、单击”提交“按钮后表单会提交，有时需要阻止元素的默认行为
　　在jQuery中，提供了preventDefault()方法来阻止元素的默认行为
　　例如：在项目中，经常需要验证表单，在单击”提交“按钮时，验证表单内容。例如某元素是否是必填字段，某元素长度是否够6位等，当表单不符合提交条件时，要阻止表单的提交（默认行为）。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7 </style>
 8 </head>
 9 <body>
10     <form action="http://www.baidu.com">
11         用户名：<input type="text" id="username"/>
12         <br/>
13         <input type="submit" value="提交" id="sub"/>
14     </form>
15     <div. id="msg"></div>
16 <script type="text/javascript" src="jquery.js"></script>
17 <script type="text/javascript">
18     $(function(){
19         $("#sub").bind("click",function(event){
20             var username = $("#username").val();
21             if(username == ""){
22                 $("#msg").html("<p>文本框不能为空.</p>");
23                 event.preventDefault();//可以改为return false;
24             }
25         });
26     });
27 </script>
28 </body>
29 </html>

posted on 2015-01-20 15:10 云中烛火阅读(105) 评论(0) 收藏举报

刷新页面返回顶部