JQuery 学习笔记（随笔）04

第四章 　jQuery 中的事件和动作

       javascript 能够利用事件和用户交互，jQuery 提供一种更为强大的事件处理机制。

以浏览器加载文档为例。在页面加载完毕后，浏览器通过javascript为DOM添加事件。在javascript 中通常用window.onload()方法，jquery使用$(document).ready(),注意两者的区别，在前面已经进行了详细的介绍。

事件绑定：

在文档转载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定bind()方法调用格式为：bind(type [,data],fn); bind 有3个参数，说明如下，第一个参数是事件类型，类型包括blur, focus,load,resize,scroll,unload,click等，第二个参数是可选参数作为event data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定处理函数。bind()方法也可以重复使用多次

合成事件：

（1）hover(enter,leave);用来模拟光标悬停事件，当光标移动到元素上时，就触发第一个函数（enter）,当光标移出时会触发第二个函数（leave）

（1）toggle(fn1,fn2,fn3........)用来模拟鼠标连续单击事件,当第一次单击时，调用第一个函数，第一次单击时调用第二个函数，。。。。但是有时候不需要那么多函数。例如：$(标题).toggle(function(){ //内容显示},function(){//内容隐藏})

事件冒泡： 

例如外层div 和内层div 都有一个click 事件，当单击内层div的时候同时也触发了外层div的事件。这就是事件冒泡，为了解决这个问题，jquery 提出了事件对象的解决办法：

$("element").bind("click",function(event){

//event 事件对象  

})

当单击element 元素时候，事件对象就被创建，这个事件对象只在事件处理函数中有效，事件处理函数执行完毕，事件对象就被销毁。

   停止事件冒泡：在jQuery中提供了stopPropagation()方法来停止事件冒泡

$("span").bind("click",function (event){

var txt=$('#msg').html() +"<p>内层被单击</p>"

$("#msg").html(txt);

event.stopPropagation();  //停止事件冒泡

})

  阻止默认行为：网页中的元素有自己默认的行为，例如单击链接就跳转，form 的表单提交，jQuery提供了preventDefault()方法来阻止元素的默认行为。例如表单验证页面，要求用户输入用户名要够6位

<script type="text/javascript">

$(function(){

$("#sub").bind("click",function(event){

if(username=""){

$("#msg").html("<p>文本框内容部能为空</p>");//提示信息

event.preventDefault();//阻止默认行为

}

})

})

</script>

<form action="test.html">

用户名：<input type="text" id="username" />

<br>

<input type="submit" value="提交" id="sub"/>

</form>

<div id="msg"></div>

</form>

如果想同事对事件停止事件冒泡和默认行为，可以再事件处理函数中返回false.

事件捕获和事件冒泡对用方向相反，jquery不支持事件捕获