当前位置 博文首页 > 向往的那片海洋：jQuery 的事件操作
DOM 中提供了 load 事件用于加载页面完毕之后的执行机制，jQuery 提供了 ready() 方法实现相似功能。但 DOM 中的 load 事件与 jQuery 中的 ready() 方法的区别如下表所示：
DOM 中的 load 事件： | jQuery 中的 read() 方法： |
|---|---|
| 没有任何简写形式 | 具有简写形式 |
当 HTML 页面加载完毕之后触发 load 事件 | 当 DOM 节点述加载完毕之后调用 ready() 方法 |
一个 HTML 页面仅允许存在一个 load 事件 | 一个 HTML 页面允许存在多个 ready() 方法 |
jQuery 提供了 ready() 方法，来实现类似于 window.obload 事件的功能。当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){
// 在这里写你的代码...
});
其中 $(document).ready() 可以进行简写为：
// 1
$().ready(function(){
})
// 2
$(function($) {
// 你可以在这里继续使用$作为别名...
});
jQuery 中提供了 bind() 和 unbind() 方法完成事件绑定与解绑功能，具体语法如下：
$element.bind(type,data,callback);
$element.unbind(type[,data.callback]);
// 这里的 type 用于删除含有一个事件类型的字符串
type：含有一个事件类型的字符串data：作为 event.data 属性值传递给事件对象的额外数据对象callback：绑定到每个匹配元素的事件上面的处理函数用法示例：
// 一个事件可以绑定多个方法
$('#btn').bind('click',function(){
console.log('this is button.');
});
$('#btn').bind('click',function(){
console.log('this is button too.');
});
如下图所示：
unbind(type,data,callback) 方法用于解绑事件，在使用过程中存在两种情况：
$('#btn').bind('click',function(){
console.log('this is button.');
});
$('#btn').bind('click',function(){
console.log('this is button too.');
});
$('#btn').unbind('click',);
用法示例：
function click1(){
console.log('this is button.');
}
function click2(){
console.log('this is button too.');
}
$('#btn').bind('click',click1);
$('#btn').bind('click',click2);
$('#btn').unbind('click',click1);
bind() 方法，多事件绑定，事件名称之间使用空格分隔
用法示例：
// 鼠标悬停事件
// * mouseover 表示鼠标悬停在指定元素之上
// * mouseout 表述鼠标从指定元素上移开
$('#title').bind('mouseover mouseout',function(){
if($('ul').is(':hidden')){
$('ul').css('display','block')
} else {
// $('ul').hide();
$('ul').css('display','none')
}
})
多事件绑定的 unbind() 方法分为三种情况：
jQuery 由于版本不同，完成事件绑定的方法不仅 bind() 方法，还有以下几种方法：
one(type[,data,fn]) 方法：为每一个匹配元素的特定事件绑定一个一次性的事件处理函数bind(type[,data,fn]) 方法：为每个匹配元素的特定事件绑定事件处理函数on(events,[selector],[data],fn) 方法：为每个匹配元素绑定一个或多个事件的事件处理函数。jQuery 1.7 版本新增方法live(type[,data],fn) 方法：该方法可实现事件委托效果。jQuery 1.7 版本该方法被移除delegate(selector[,type][,data],fn) 方法：该方法可实现事件委托效果。jQuery 1.6 版本新增方法jQuery 中提供多组事件绑定与解绑定的方法：
bind() 与 unbind() jQuery 3.0 版本后删除方法on() 与 off() 方法 jQuery 1.7 版本后新增方法
bind() 与 unbind() 的底层方法就是 on() 和 off()live() 与 die() jQuery 1.7 版本后删除方法
delegate() 与 undelete() - jQuery 1.6 版本后新增方法,jQuery 3.0 版本后删除方法
one() 为事件绑定一次性的函数jQuery 提供了 hover() 方法模拟鼠标悬停事件效果，具体语法如下：
$element.hover([over,]out);
over：鼠标移到元素上要触发的函数out：鼠标移出元素要触发的函数用法示例：
$('#title').hover(function(){
$('ul').css('display','block');
},function(){
$('ul').css('display','none');
});
jQuery 提供了 toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。具体语法如下：
$element.toggle(fn,fn2[,fn3,fn4,...]);
说明：需要注意的是在 1.9 版本这个方法发生了变化，不再是事件切换的方法而是变成了动画方法。
trigger()）jQuery 提供了 trigger() 方法用于模拟触发匹配元素绑定的事件，具体语法如下：
$element.trigger(type[,data]);
type：一个事件对象或者要触发的事件类型data：传递给事件处理函数的附加参数用法示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件模拟</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
// 绑定事件 - 由用户触发,调用处理函数
$('#btn').bind('click',function(){
console.log('this is test')
})
// 模拟用户触发事件
$('#btn').trigger('click');
</script>
上述代码运行效果如下图所示：
