三、jQuery事件处理

最新推荐文章于 2024-11-07 13:38:59 发布

chuangzhanben4759

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量125

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://my.oschina.net/wangning0535/blog/530868

版权

一、加载DOM

在页面加载完毕后，浏览器会通过Javascript为DOM元素添加事件。在常规的Javascript代码中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。

1、执行时机

$(document).ready()方法和window.load方法有相似的功能，但是在执行时机方面是有区别的。window.load方法是在网页中所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行，即Javascript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以调用。此时，网页中的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。

jQuety中的load()方法会在元素的onload事件中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

二、事件绑定

在文档加载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用：bind(type,[data],fn)；

第一个参数为事件类型：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,chang,select,submit,keydown,keypress,keyup,error等。当然也可以是自定义名称。

第二个参数为可选参数：作为event.data属性值传递给事件对象的额外数据对象。

第三个参数则是用来绑定的处理函数。

实例：

1、单击“ 标题”链接将显示。

鼠标反复单击使用的：is(“：visible”)方法，

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }
</style>
<script type="text/javascript">
 $(function(){
  $("div.content").hide();
  var $content=$("div.content");
  $("h5.head").bind("click",function(){
   if($content.is(":visible")){
    //如果内容显示
    $content.hide();
    }
   else{
    $("div.content").show("fast");
    }
   });
  });
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">什么是jQuery?</h5>
 <div class="content">
  jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
 </div>
</div>
</body>
</html>

2、把事件类型换成mouseover和mouseout，当鼠标滑过时候，就触发事件。

<script type="text/javascript">
 $(function(){
  $("div.content").hide();
  var $content=$("div.content");
     $("h5.head").mouseover(function(){
    $content.show();
   }).mouseout(function(){
    $content.hide(); 
    });
  });
</script>

三、合成事件：

jQuery中有两个合成事件---hover()和toggle()方法hover()方法和toggle()方法都属于jQuery自定义的方法。

① hover()方法：语法结构：hover(enter,leave);hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数（enter）；当光标移出这个元素时，会触发指定的第2个函数(leave)。

 $("h5.head").hover(function(){
   $content.show();
   },function(){
   $content.hide();
    });

② toggle()方法

语法结构为：toggle(fn1,fn2,fn3....)

toggle()方法用于模拟鼠标连续单击事件。

 $("h5.head").toggle(function(){
   $content.show();
   },function(){
   $content.hide();
    });

toggle()方法在jQuety中还有另外一个作用：切换元素的可见状态。如果元素时可见的，单击切换后则为隐藏。如果元素时隐藏的，单击切换后则为可见的。

四、事件冒泡

1、什么是冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件，事件会按照DOM的层次结构像水泡一样不断向上直至顶端。事件冒泡可能会引起预料之外的效果。因此有必要对事件的作用范围进行限制。

2、事件对象

在程序中使用事件对象非常简单，只要为函数添加一个参数

$("p").bind("click",function(event){ //event：事件对象

});

3、停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。

event.stopPropagation()；

4、阻止默认行为

网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交，有时需要阻止元素的默认行为。在jQuety中提供了prevnetDefault()方法来阻止元素的默认行为。

实例：验证表单，在单机“提交”按钮时，验证表单内容，例如某元素是必填字段，某元素长度是否够6位，当表单不符合提交条件时，要阻止表单的提交（默认行为）。

$(function(){
  $(":submit").click(function(event){
   var username=$("#username").val();
   if(username==""){
    $("#msg").html("<p>不能为空</p>");
    event.preventDefault();//阻止默认行为
    }
   });
  });

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。return false;

5、事件捕获

事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。

五、事件对象的属性

jQuery对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。

1、event.type

该方法的作用是可以获取到事件的类型。

2、event.preventDefault()：阻止默认的事件行为。

3、stopPropagation()：阻止事件的冒泡。

4、event.target()：该方法的作用是获取到触发事件的元素。

5、event.relatedTarget()：

6、event.pageX()和event.pageY() 该方法的作用是获取到光标相对于页面的x坐标和y坐标。

7、event.which():该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

8、event.metaKey()方法：该方法为键盘事件中获取<ctrl>按键。

9、event.originalEvent()：该方法的作用是指向原始的事件对象。

六、移除事件

可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

1、移除按钮元素上以前注册的事件。unbind([type],[data]);

第一个参数：事件类型。第二个参数为将要移除的函数。如果没有参数，则删除所有绑定的事件。如果提供了事件类型作为参数，则只删除该类型的绑定事件。如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

2、移除button元素的其中一个事件

首先要为这些匿名处理函数指定一个变量。

$(function(){
 $("#btn").bind("click",myFun1=function(){
  $("#test").append("<p>我的绑定函数</p>");
  }).bind("click",myFun2=function(){
   $("#test").append("<p>ssss</p>");;
   });
 //删除单个事件
 $("#del").bind("click",function(){
  
  $("#btn").unbind("click",myFun2);
  });
 });

3、one()方法：

对于只需要触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写方法，one()方法。One()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除，即在每个对象上，事件处理函数只会被执行一次。

one(type,[data],fun);

七、模拟操作

1、常用模拟

有时候需要模拟用户操作，来达到单击的效果。例如在用户进入页面后，就出发click事件，而不需要用户去主动单击。在jQuery中使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。

$("#btn").trigger("click");

这样，当页面装载完毕后，就会立刻输出想要的效果。

2、触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。例如

$("#btn").click("myClick",function(){
    $("#test").append("<p>你好</p>");
}); 
$("#btn").trigger("myClick");

3、传递数据

trigger(type,[data])：第一个参数：是触发的事件类型。第二个参数是要传递事件处理函数的附加数据。

4、执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。例如

$("input").trigger("focus");

该代码不仅会触发为<input>元素绑定的focus事件，也会使<input>元素本身得到焦点(这是浏览器的默认操作)。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法triggerHandler()方法

该方法会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只会触发绑定的focus事件，不会得到焦点。

八、其他用法

1、绑定多个事件类型

 $("#test").bind("mouseonver mouseout",function(){
   $(this).toggleClass("over");
   });

2、添加事件命名空间，便于管理

例如可以吧为元素绑定的多个事件类型用命名空间规范起来，

$(function(){
  $("div").bind("click.plugin",function(){
   $("body").append("<p>click事件</p>");
   });
   $("div").bind("mouseover.plugin",function(){
    $("body").append("<p>mouseover事件</p>");
    });
  //删除事件
  $("button").click(function(){
   $("div").unbind(".plugin");
   });
 });

在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要制定命名空间即可。单击button元素后，"plugin"的命名空间被删除，而不在"plugin"的命名空间的事件依然存在。

$(function(){
 $("div").bind("click",function(){
  $("div").bind("click",function(){
   $("body").append("<p>click事件</p>");
   });
   $("div").bind("click.plugin",function(){
    $("body").append("<p>click.plugin事件</p>");
    });
  $("button").click(function(){
   $("div").trigger("click!"); //注意click后面的感叹号
   });
  });
 });

当单击<div>元素后，会同时触发click事件和click.plugin事件。如果只是单击<button>元素，则只触发click事件，而不触发click.plugin事件。注意，trigger("click!")后面的感叹号的作用是匹配所有不包含在命名空间中的click方法。

转载于:https://my.oschina.net/wangning0535/blog/530868