jQuery 自定义事件的学习笔记

来源:互联网 时间:1970-01-01

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 input失去焦点事件实例介绍
  • jQuery hover事件更改元素的css样式
  • jQuery中live绑定的事件与解除绑定
  • jQuery 防止点击事件重复提交实例
  • jquery 默认enter事件(回车事件)提交
  • jquery中mouseenter和mouseleave事件示例
  • jquery on()方法绑定多个选择器,多个事件
  • jQuery post()事件使用方法详解
  • jQuery.load()事件使用方法详解
  • jquery失去焦点事件了blur实例介绍



相关阅读:
Top