jQuery自定义事件简单介绍

快乐打工仔 分类:实例代码

本章节通过简单的代码实例介绍一下jQuery中的自定义事件。

很多朋友可能接触过自定义事件这个概念,但是并不知道它存在的意义何在,下面也会做一下简单介绍。

现在这里我们有一个复选框,下面为其注册一个click事件处理函数。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var count=1;
  $("#ck").click(function(){
    count=count+1;
    $("#show").text(count);
  })
});
</script>
</head>
<body>
<input type="checkbox" id="ck"/>
<div id="show"></div>
</body>
</html>

上面的代码为复选框注册了click事件处理函数,不过这个时候每触发一次事件就会改变复选框的选中状态。

那么如何在不改变复选框选中状态的情况下,执行事件处理函数的逻辑处理呢,其实很简单,那就是直接创建一个函数,此函数来完成逻辑处理即可,代码如下:

var onClick=function(dom){
  count=count+1;
  $("#show").text(count);
};

调用上面的函数就可以执行一次事件处理函数的逻辑处理,但是不改变复选框的选中状态。

但是利用自定义事件来解决此问题是更为优秀的选择:

(1).复选框的逻辑处理应该属于复选框,没有必要使用一个全局函数来进行处理。并且从面相对象的角度来看,对象是是由属性和动作(方法)构成的,所以复选框的逻辑处理最好是要属于复选框这个对象。

(2).充分利用匿名函数,减少全局变量或者函数的数量,有利于提高脚本的执行效率。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var count=1;
  $("#ck").bind("evtClick",function(evt){
    count=count+1;
    $("#show").text(count);
  }); 
  $("#bt").click(function(){
    $("#ck").trigger("evtClick");
  })
});
</script>
</head>
<body>
<input type="checkbox" id="ck"/>
<input type="button" id="bt" value="查看效果"/>
<div id="show"></div>
</body>
</html>

上面的代码会更科学一点,代码非常的简单不多介绍了。

trigger()方法可以参阅jQuery trigger()一章节。

回复

我来回复
  • 暂无回复内容