jquery的事件和“事件冒泡的解释”

来源：互联网发布：护理网络教育本科编辑：程序博客网时间：2024/06/05 21:13

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'jquery10.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style type="text/css">
  /* div{
   border:1px solid red;
   width:100px;
   height:100px;
   background:blue;
   align:center;
  }
  span{
   width:100px;
   height:50px;
   background:orange;

  }
  *{
    cursor: pointer;
  }*/
</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
  /*
     什么是事件冒泡,通俗的来讲就是我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.<br>
     body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....<br />
     在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!
  */
  /*function method1(event){


   alert("body clicked");
   event.stopPropagation();//阻止事件冒泡
  }
  function method2(event){

   alert("div clicked");
   event.stopPropagation();//阻止事件冒泡
  }
  function method3(event){

   alert("span clicked");
   event.stopPropagation();//阻止事件冒泡。Propagation：传播
   //event.preventDefault();
  }
  //绑定
  $(function(){
   $("span").bind("click",function(event){

   alert("span click");
   //return false;//可以防止冒泡.IE和fireFox都支持
   //event.stopPropagation();//可以防止冒泡.IE和fireFox都支持
   //event.preventDefault();//貌似没什么用
  });

  $("div").bind("click",{name:"caohuan"},function(event)//传递参数的bind的用法
  {
   alert(event.data.name);
   return false;
  });
  $("body").bind("click",function(){

   alert("body click");
  });
  });*/
  $(function(){

   $("div div:first").bind("mouseover",function(){

    if($("div div:eq(1)").is(":visible"))//is判断作为判断
    {
     $("div div:eq(1)").hide(2000);
    }
    else
    {
     $("div div:eq(1)").show(2000);
    }

   });
   $("div div:first").bind("mouseout",function(){

    if($("div div:eq(1)").is(":visible"))//is判断作为判断
    {
     $("div div:eq(1)").hide(2000);
    }
    else
    {
     $("div div:eq(1)").show(2000);
    }

   });

  });
</script>
</head>

<body>
<center>
     

     <div>
     <div style="background: orange;font-size: 18px;width: 150px;">显示div的内容</div>
     <div style="color: red;font-size:20px;display: none;width: 150px;text-align: left;background: blue;">
       也许，这是一种成长的必然，也许，这是一段无奈而绝望的偏离，每个人都在选择，每个人都在绘制不朽的蓝图。
　
　　     </div>
     </div>
   </center>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'jquery11.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style type="text/css">
  div{
   border: 1px solid red;
   width:100px;
  }

</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>