jQuery学习笔录5（jQuery中的事件）
$表示JQuery对象，可以有好几种用法。比如传递选择器字符串、页面对象等，如果直接传函数体进去，表示当页面加载完毕时执行这个函数
一
jquery: $(document).ready()【DOM结构加载好 ，就可以响应事件】 代替 Javascript：window.onload()【页面元素全部加载到浏览器】。
使用$(document).ready()的时候，如果事件是对图片的长宽操作，而此时元素的关联文件未下载完，事件就不一定有效。
解决方法——jQuery中另一个关于页面加载的方法——load()：等元素都加载完，再响应事件。
jQuery:$(window).load(function(){.................}) == javascript : window.onload()=function(){................}
二
事件冒泡：
Span->out div,event responsing one by one
从里面向外扩
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>
<!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 runat="server">
<title>事件冒泡</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
out div
<br />
<span>internal div</span>
<br />
out div
</div>
<div id="msg"></div>
</form>
</body>
</html>
<script>
$(function(){
//Span->out div,event responsing one by one
$("span").bind("click",function(){
var txt=$("#msg").html()+"<p>internal span is clicked";
$("#msg").html(txt);
console.info(txt)
})
$("#content").bind("click",function(){
var txt=$("#msg").html()+"<p>out div is clicked";
$("#msg").html(txt);
console.info("1:"+txt)
})
})
</script>解决冒泡的方法： 在function的参数上添加
event事件对象。当点击html中元素时，事件对象就被创建。这个事件对象只有事件处理函数才能访问执行。
event.stopPropagation();// 停止事件冒泡
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>
<!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 runat="server">
<title>事件冒泡</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
out div
<br />
<span>internal div</span>
<br />
out div
</div>
<div id="msg"></div>
</form>
</body>
</html>
<script>
$(function(){
//Span->out div,event responsing one by one
$("span").bind("click",function(event){
var txt=$("#msg").html()+"<p>internal span is clicked";
$("#msg").html(txt);
console.info(txt)
event.stopPropagation();// 停止事件冒泡
})
$("#content").bind("click",function(event){
var txt=$("#msg").html()+"<p>out div is clicked";
$("#msg").html(txt);
console.info("1:"+txt)
})
})
</script>
三
阻止元素默认行为：
比如 form表单 点击提交时，表单就被提交，但是呢，如果先要验证表单，符合要求在提交呢？
这里就用到event.preventDefault();
事件捕获刚好和事件冒泡相反，事件捕获石从最顶端往下触发
body->div->span
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>
<!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 runat="server">
<title>事件冒泡</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server" action="../jQueryDom/JqueryCSS_DOM2.aspx" method="post">
用户名：<input type="text" id="username" />
<br />
<input type="submit" value="提交" id ="sub" />
<div id="content">
out div
<br />
<span>internal div</span>
<br />
out div
</div>
<div id="msg"></div>
</form>
</body>
</html>
<script>
$("#sub").bind("click",function(event){
var username=$("#username").val();//get $("#username")'s value
if(username.length<6)
{
$("#msg").html("<p>文本内容过短</p>");
event.preventDefault(); // return false ; 简写
}
} )
</script>
四
移除事件
unbind([type][,date])
参数1 事件类型，参数二 要移除的函数
知识点：
$("#msg").html("<p>bind function 2</p>"); //html 内容被覆盖
$("#msg").html()+"<p>bind function 3</p>"; //html 内容往后接上
一 删除id=btn的click事件，删除id=btn的所有事件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>
<!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 runat="server">
<title>事件冒泡</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server" action="../jQueryDom/JqueryCSS_DOM2.aspx" method="post">
用户名：<input type="text" id="username" />
<br />
<input type="submit" value="提交" id ="sub" />
<br />
<input type="button" value="click me" id="btn" />
<br />
<input type="button" value="删除事件" id="delAll" />
<div id="content">
out div
<br />
<span>internal div</span>
<br />
out div
</div>
<div id="msg"></div>
</form>
</body>
</html>
<script>
//移除事件 -小试牛刀
$("#btn").bind("click",function(){
$("#msg").html("<p>bind function 1</p>");
$("#msg").html("<p>bind function 2</p>"); //html 内容被覆盖
var msg1= $("#msg").html()+"<p>bind function 3</p>"; //html 内容往后接上
console.info("1 :"+msg1);
})
//移除事件-1 同一个元素绑定多个事件
$("#btn").bind("click",function(){
$("#msg").append("<p>bind function 1</p>"); // append :html 内容往后接上
console.info("1")
}).bind("click",function(){
$("#msg").append("<p>bind function 2</p>");
console.info("2")
}).bind("click",function(){
$("#msg").append("<p>bind function 3</p>");
console.info("3")
})
//移除事件
//$("#delAll").click(function(){//bind方式的在下面
// $("#btn").unbind("click");//删除 id=btn 元素的click 事件，（submit 移除提交事件）
// console.info("delete");
//})
$("#delAll").bind("click",function(){
$("#btn").unbind();
console.info("bind-delete");
})
</script>二 删除指定函数的事件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery_event2.aspx.cs" Inherits="jQueryEvent_jQuery_event2" %>
<!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 runat="server">
<title>事件冒泡</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server" action="../jQueryDom/JqueryCSS_DOM2.aspx" method="post">
用户名：<input type="text" id="username" />
<br />
<input type="submit" value="提交" id ="sub" />
<br />
<input type="button" value="click me" id="btn" />
<br />
<input type="button" value="删除事件" id="delAll" />
<div id="content">
out div
<br />
<span>internal div</span>
<br />
out div
</div>
<div id="msg"></div>
</form>
</body>
</html>
<script>
//移除事件-1 同一个元素绑定多个事件,给每个绑定的函数命名
$("#btn").bind("click",Fun1=function(){
$("#msg").append("<p>bind function 1</p>"); // append :html 内容往后接上
console.info("1")
}).bind("click",Fun2=function(){
$("#msg").append("<p>bind function 2</p>");
console.info("2")
}).bind("click",Fun3=function(){
$("#msg").append("<p>bind function 3</p>");
console.info("3")
})
//移除指定的函数
$("#delAll").bind("click",function(){
$("#btn").unbind("click",Fun2); //函数名不用引号引起的，删除Fun2函数，区分大小写
console.info("bind-delete");
})
</script>
one()类似于
bind()，但是呢，one()只作用一次，之后绑定立即被解除。把上面代码的bind 换成one 试试~