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')