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不支持事件捕获

猜你喜欢

转载自andy2019.iteye.com/blog/1457885