jq代码学习10--事件冒泡

来源：互联网发布：什么叫数据流量编辑：程序博客网时间：2024/05/11 14:05

1.停止冒泡事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-4-2</title><style type="text/css">*{margin:0;padding:0;}  body { font-size: 13px; line-height: 130%; padding: 60px; }#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}p {width:200px;background:#888;color:white;height:16px;}</style><script src="../../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">$(function(){    // 为span元素绑定click事件    $('span').bind("click",function(event){        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";        $('#msg').html(txt);        event.stopPropagation();    //  阻止事件冒泡    });    // 为div元素绑定click事件    $('#content').bind("click",function(event){        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";        $('#msg').html(txt);        event.stopPropagation();    //  阻止事件冒泡    });    // 为body元素绑定click事件    $("body").bind("click",function(){        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";        $('#msg').html(txt);    });})</script></head><body><div id="content">    外层div元素    <span>内层span元素</span>    外层div元素</div><div id="msg"></div></body></html>

2.阻止默认行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">$(function(){   $("#sub").bind("click",function(event){         var username = $("#username").val();  //获取元素的值         if(username==""){     //判断值是否为空             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息             return false;         }   })})</script></head><body><form action="test.html">用户名：<input type="text" id="username" /><br/><input type="submit" value="提交" id="sub"/></form><div id="msg"></div></body></html>

3.停止事件冒泡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-4-4</title><style type="text/css">*{margin:0;padding:0;}  body { font-size: 13px; line-height: 130%; padding: 60px; }#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}p {width:200px;background:#888;color:white;height:16px;}</style><script src="../../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">$(function(){    // 为span元素绑定click事件    $('span').bind("click",function(event){        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";        $('#msg').html(txt);        return false;    });    // 为div元素绑定click事件    $('#content').bind("click",function(event){        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";        $('#msg').html(txt);        return false;    });    // 为body元素绑定click事件    $("body").bind("click",function(){        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";        $('#msg').html(txt);    });})</script></head><body><div id="content">    外层div元素    <span>内层span元素</span>    外层div元素</div><div id="msg"></div></body></html>

4.移除事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Panel</title><style type="text/css">*{margin:0;padding:0;}  body { font-size: 13px; line-height: 130%; padding: 60px; }p {width:200px;background:#888;color:white;height:16px;}</style><script src="../../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">    $(function(){       $('#btn').bind("click", myFun1 = function(){                     $('#test').append("<p>我的绑定函数1</p>");              }).bind("click", myFun2 = function(){                     $('#test').append("<p>我的绑定函数2</p>");              }).bind("click", myFun3 = function(){                     $('#test').append("<p>我的绑定函数3</p>");              });       $('#delTwo').click(function(){              $('#btn').unbind("click",myFun2);       });    })</script></head><body><button id="btn">点击我</button><div id="test"></div><button id="delTwo">删除第二个事件</button></body></html>

阅读全文

0 0