jquery中提供了两种方法可以绑定自定义事件:

bind()和one()
而绑定的自定义事件的触发,必须得用jquery中的
trigger()方法才能触发。

我们先来看on事件

 代码如下 复制代码

$('.js-submit').on('click', function() {
  // some code here
});

除开 click 事件,我们还有许多可以绑定的事件,比如 dblclick、blur、change 等等。

但这些事件有一个问题,语义(semantic)不明。click 代表什么?它表示我单击了一个元素,这个元素可以是 p,可以是 button,可以是其他任何 HTML 元素。但它也仅仅只是说明,一个点击事件在页面上发生了,至于事件引发什么结果,就需要我们自己定义。

举一个例子。一个输入框,用于输入用户名,一个按钮,用于提交用户名给服务器:

 代码如下 复制代码

<input type='text' value='www.111cn.net' id='username'>
<input type='button' value='提交' class='js-submit'>

这里,我们假设有三种情况:

用户提交空值
    用户提交的用户名不存在
    用户提交的用户名存在

经典的 JavaScript 写法是这样的:

 代码如下 复制代码

$('.js-submit').on('click', function() {
  var username = $('#username').val();
  username = $.trim(username);
  if (username === '') {
    console.log('请不要留空');
  }
  $.post(url, {username: username}, function(data) {
    var res = data;
    if (res.retcode === -1) {
      console.log('用户名不存在');
    } else if (res.retcode === 0) {
      console.log('用户名存在');
    }
  });
});

?能说这段代码有问题呢?它可用,也很直观。

但当我们要判断的情况不断增多,每种情况下执行的操作越来越多时,以上的写法就会变得非常丑陋。retcode 等于0是什么意思?等于-1又是什么意思?我们在给后期的阅读代码增加负担。

jQuery 提供的自定义事件可以引入语义,很好地挽救这类代码。

以上面的例子说,我们预设有三种情况,在 jQuery 里,我们将它们定义为三种事件:

 代码如下 复制代码

$('.js-submit').on('click', function() {
  var username = $('#username').val();
  username = $.trim(username);
  if (username === '') {
    $('#username').trigger('blank.username'); // 如果 username 为空值,则触发 blank.username 事件
  }
  $.post(url, {username: username}, function(data) {
    var res = data;
    if (res.retcode === -1) {
      $('#username').trigger('notExist.username'); // 如果用户不存在,则触发 notExist.username 事件
    } else if (res.retcode === 0) {
      $('#username').trigger('success.username'); // 如果用户存在,则触发 sucess.username 事件
    }
  });
});
//定义自定义事件
$('#username').on('blank.username', function() {
  console.log('请不要留空');
});
$('#username').on('notExist.username', function() {
  console.log('用户名不存在');
});
$('#username').on('success.username', function() {
  console.log('用户名存在');
});

有人可能要失望了。不是说挽救代码的吗?怎么好像代码越写越多了。确实,相比经典写法,这里的代码略略多出一些,但我觉得这种小牺牲完全值得,因为现在代码加入了语义,可读性更好,不管后期是要维护还是要扩展,都会非常方便。

bind()方法:

看代码:

 代码如下 复制代码

<h3>梦三秋博客</h3>
<input type="button" value="点击我触发H3绑定的自定义事件" id="demo">
<script>
$(function(){
    $("h3").bind("test",function(){
        alert($(this).text());
    });
    $("#demo").click(function(){
        $("h3").trigger("test");
        $("h3").trigger("test");
    });
});
</script>

看上面的代码,我们首先给h3标签用bind()方法绑定了一个自定义的事件“test”,触发这个事件会弹出对话框,显示h3中的文本内容。之后又给id为“demo”的按钮绑定了单击事件,在这个单击事件中,我们用了两次trigger方法来触发自定义事件,当我们点击这个按钮之后会触发两次h3标签绑定的自定义事件,结果就会弹出两次对话框。

 

jQuery 自定义事件的学习笔记的更多相关文章

  1. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  2. JS和JQuery中的事件托付 学习笔记

    事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) < ...

  3. 锋利的jQuery第2版学习笔记4、5章

    第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...

  4. Hive自定义函数的学习笔记(1)

    前言: hive本身提供了丰富的函数集, 有普通函数(求平方sqrt), 聚合函数(求和sum), 以及表生成函数(explode, json_tuple)等等. 但不是所有的业务需求都能涉及和覆盖到 ...

  5. Jquery 自定义事件实现发布/订阅

    //用户点击logoff按钮时,广播一个自定义事件,给任何需要保存状态的感兴趣的观察者,然后导航到logoff页面 $('#logoff').click(function(){ $.event.tri ...

  6. jQuery基础与常用方法学习笔记

    JQ与JS的关系:可以共存,不可混用.jq源码,源生JS面向对象写的   JQ写法 链式操作 $(‘#div’).html(‘hello’).css().click() 赋值取值合体 .html(‘h ...

  7. 锋利的jQuery第2版学习笔记1~3章

    第1章,认识jQuery 注意:使用的jQuery版本为1.7.1 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想 ...

  8. jQuery中事件的学习

    刚学习了jQuery中的事件,主要通过bind(),toggle(),hover()来主要实现,下面先说一说关于bind的想关要点. 1.bind方法. bind方法的主要参数为bind(type,f ...

  9. 锋利的jQuery第2版学习笔记8~11章

    第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQ ...

随机推荐

  1. python的深拷贝和浅拷贝

    import copy list1=[1,2,3,4,5] c_list1=list1 c_list1[0]=-1 for i in list1: print str(i)+' ', #输出的世 -1 ...

  2. [Selenium]中使用css选择器进行元素定位

    参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html 常见语法 * 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有 ...

  3. BZOJ 1043 HAOI2008 下落的圆盘 计算几何

    题目大意:n个圆盘依次下落.求终于能看到的轮廓线面积 円盘反对! 让我们一起团结起来! 赶走円盘! 咳咳.非常神的一道题 今天去看了题解和白书才搞出来-- 首先我们倒着做 对于每一个圆盘处理出在它之后 ...

  4. 无废话C#设计模式系列文章

    不错的系列文章 原文:http://www.cnblogs.com/lovecherry/archive/2007/10/17/927728.html 本系列文章从公司内部的知识分享修改而来,有错误或 ...

  5. Codeforces Gym 100610 Problem H. Horrible Truth 瞎搞

    Problem H. Horrible Truth Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1006 ...

  6. C#操作Word (1)Word对象模型

    Word对象模型  (.Net Perspective) 本文主要针对在Visual Studio中使用C# 开发关于Word的应用程序 来源:Understandingthe Word Object ...

  7. BI之ETL学习(一)kettle

    最近开始折腾数据,起源是多业务数据源需要转换到数据分析平台.这个过程需要跨机器,跨库.同时还需要将业务数据表的内容进行转换,合并,清洗等等操作. 经过多方选型,最终决定使用kettle来作为数据抽取处 ...

  8. 终于找到了无毒版的fences1.0(2.0版本要收费的)

    今天终于安装了fences1.0,桌面不用那么乱哄哄的啦 我在博客里上传了安装文件,方便大家下载安装,这是无毒的哦,网上有很多都是不能通过病毒检测的. 地址如下:点击这里下载 使用方法: 创建块:安装 ...

  9. 小白日记18:kali渗透测试之缓冲区溢出实例(二)--Linux,穿越火线1.9.0

    Linux系统下穿越火线-缓冲区溢出 原理:crossfire 1.9.0 版本接受入站 socket 连接时存在缓冲区溢出漏洞. 工具: 调试工具:edb: ###python在漏洞溢出方面的渗透测 ...

  10. 小白日记13:kali渗透测试之服务扫描(三)-SMTB扫描、防火墙识别、负载均衡识别、WAF识别

    SMTP扫描 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式.SMTP协议属于TCP/ ...