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标签绑定的自定义事件，结果就会弹出两次对话框。
