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. 简谈java的split

    最近都在处理视频音频,今天在合成音频视频时为了给合成的新文件换个新名字,我打算获取了之前的视频名称,用split来分割出不带后缀的名字,再自己加上后缀. 众所周知split可以分割由某种字符分段的St ...

  2. 【转】python的小知识

    1. 如何反序访问一个序列(how do I iterate over a sequence in reverse order) 如果序列是list,则使用list.reverse()即可将序列反序. ...

  3. 理解 strcpy方法

    char* strcpy(char* strDest, const char* strSrc) { assert((strDest!=NULL) && (strSrc !=NULL)) ...

  4. swift3.0 中NSNotification 的使用

    swift3.0 有很大变化,其中之一就是NSNotification使用跟原来不一样,以前NSNotification name是String:3.0中定义了一个类型NSNotification.n ...

  5. iOS6 / iOS7 状态栏高度适配

    问题原因:iOS7的状态栏(status bar)不再占用单独的20px,所以假设你在iOS6上的界面布局是正常的,那么到了iOS7上就会变成以下这个样子:             左边是iOS6界面 ...

  6. BI之ETL学习(一)kettle

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

  7. MongoDB笔记--安装篇

    安装MongoDB 第一步:下载安装包:官方下载地址←单击此处,如果是win系统,注意是64位还是32位版本的,请选择正确的版本. 第二步:新建目录“D:\MongoDB”,解压下载到的安装包,找到b ...

  8. 关于设置android:imeOptions属性无效的解决办法

    在对Android的EditText控件进行设置时,经常会限定一下输入法的属性,设置右下角为完成或者搜索等,一般都会想到android:imeOptions属性,但是仅仅这么设置通常是无效的,还要搭配 ...

  9. iOS10全新推送功能的实现

    从iOS8.0开始推送功能的实现在不断改变,功能也在不断增加,iOS10又出来了一个推送插件的开发(见最后图),废话不多说直接上代码: 在开始之前需要打开一个推送开关,不然无法获取deviceToke ...

  10. JavaFX(三)窗口拖动

    1.问题场景 在上一篇中,我们将窗口的默认标题栏隐藏从而导致鼠标点击窗体无法进行拖动. 2.解决思路 给组件添加鼠标按下事件监听器和鼠标拖动事件监听器. 3.代码实现 代码片段: private do ...