jquery的事件和“事件冒泡的解释”
<%@ 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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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
<center><span>这是span</span></center>
这是外部的div
</div> -->
<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>
<%@ 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 '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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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>
<script type="text/javascript">
$(function(){
$("form").submit(function(event){
var val = $("form input:first").val();
if(val == ''){
$("form input:first").after("用户名不能为空");
//return false;//可以阻止form进行默认提交
}
//event.preventDefault();//可以阻止form进行默认提交
//event.stopPropagation();//不能阻止进行默认提交,但是可以进行冒泡的阻止
});
$("div").click(function(event){
//alert(event.type);//默认行为会跑到google，event.type获得event事件的类型
//return false;//会阻止炮打google，进行默认行为的阻止
//event.preventDefault();
//event.stopPropagation();//不会阻止默认行为
//alert(event.target.href);//event.target获得事件源对象，这里就是<a href="http://www.google.com">点击我</a>这个对象
//alert(event.target.innerHTML);
return false;
});
/*$("input[type=button]:first").bind("click",myClick1 = function(){//进行同时帮绑定事件
$("div").append("我是真的很爱你<br>");
}).bind("click",myClick2 = function(){
$("div").append("真的假的<br>");
}).bind("click",myClick3 = function(){
$("div").append("不是因为寂寞才想你<br>");
});*/
//进行同时绑定事件的一次性
/*$("input[type=button]:first").one("click",myClick1 = function(){//进行同时帮绑定事件
$("div").append("我是真的很爱你<br>");
}).one("click",myClick2 = function(){
$("div").append("真的假的<br>");
}).one("click",myClick3 = function(){
$("div").append("不是因为寂寞才想你<br>");
});*/
//触发器或模拟事件
//$("input[type=button]:first").trigger("click");
//撤销绑定事件
/*$("input[type=button]:eq(1)").bind("click",function("click"){
$("input[type=button]:first").unbind("click",myClick1);//取消所有的绑定
});*/
$("#btn1").bind("myClick",function(event,message1,message2){//自定义事件(带参数的)
$("div").append("I "+ message1 + message2 + "<br/>");
});
$("#btn2").bind("click",function(){
$("#btn1").trigger("myClick",[" love",' you']);
}).trigger("click",[" love",' you']);
//同时绑定多个事件
$("div").bind("mouseout mouseover",function(){
//注意在forFox中定义的div的大小不会因为内容比div的大而导致div被撑大
$("div").append("asd");
});
});
</script>
</head>
<body>
<form action="test.do" method="post">
username:<input type="text" value="caohuan"><br>
<input type="submit" value="提交">
</form>
<a href="http://www.google.com">点击我</a><br><br><br>
<input type="button" id="btn1" value="点击"><br>
<input type="button" id="btn2" value="撤销绑定"><br>
<div></div>
</body>
</html>
