jquey的自定义事件小结

jQuery的自定义事件是通过on和one绑定的，然后再通过trigger来触发这个事件

jQuery 提供的自定义事件可以引入语义，很好地解决问题

//1. 定义自定义事件
$('#username').on('blank.username', function() {
  console.log('请不要留空');
});
$('#username').on('notExist.username', function() {
  console.log('用户名不存在');
});
$('#username').on('success.username', function() {
  console.log('用户名存在');
});

//2. 触发自定义事件
$('.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 事件
    }
  });
});

trigger需要处理的问题

1.模拟事件对象，用户模拟处理停止事件冒泡

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

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

以上代码不仅会触发为input元素绑定的focus事件，也会使input元素本身得到焦点（浏览器默认操作）。

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

$container.one("focus",function(){
    .....
});
$("input").triggerHandler("focus");

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

请注意这里使用了jQuery 的one 来代替on。这两者的区别在于，one 在触发处理器之后会自动将其删除。

2.区分事件类型，触发标准的浏览器事件 和 自定义事件名绑定的处理程序。

解决方法：事件名称+命名空间

p4.on('click.aaa.ccc',function(e,vv,c){
       console.log('p4')
   })
p4.trigger('click.aaa')