事件
1、页面加载
DOM提供了load事件用于叶面积在完毕之后执行机制，jQuery提供了ready()方法实现相似功能。但DOM中的load事件与jQuery中的ready()方法具有以下三种区别：
DOM中的load事件：
没有任何简写形式
当HTML页面加载完毕之后出发load事件
一个HTML页面仅允许存在一个load事件
jQuery中的ready()方法：
具有简写形式
当DOM节点树加载完毕之后调用ready()方法
一个HTML页面允许存在多个ready()方法
jQuery中的ready()方法：示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面加载（jQuery）</title> <script src="../jquery-1.12.4.js"></script> <script> /* jQuery提供了ready()方法——三种写法 作用：实现了类似于window.onload事件的功能 */ // 写法一： /*$(document).ready(function () { console.log($('#btn')); });*/ // 写法二 /*$().ready(function () { console.log($('#btn')); });*/ // 写法三----平常用法 $(function () { console.log($('#btn')); }); </script> </head> <body> <button id="btn">按钮</button> </body> </html>
2、事件绑定
（1）单事件绑定
jQuery提供了bind()方法完成事件绑定功能。
jQuery提供了unbind()方法完成事件解绑定功能。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的绑定与解绑</title> <script src="../jquery-1.12.4.js"></script> </head> <body> <button id="btn">按钮</button> </body> <script> /* bind(type,data,callback)方法 - 绑定事件 *参数 *type - 表示绑定的事件名称（注意：没有on） *data -作为event.data属性传递给事件对象的额外数据对象 *callback - 表示绑定时间内的处理函数 */ function click1() {//为按钮绑定点击事件 console.log('this is function') } function click2() {//为按钮绑定点击事件 console.log('this is function too') } $('#btn').bind('click',click1); $('#btn').bind('click',click2); /* unbind(type,data,callback)方法 - 解绑定事件 *参数 *type - 表示绑定的事件名称（注意：没有on） *data -作为event.data属性传递给事件对象的额外数据对象 *callback - 表示绑定时间内的处理函数 *情况 *如果传递事件名称的话 - 解绑定该事件的所有处理函数 *如果传递事件名称和指定的处理函数 - 解绑该事件的指定处理函数 */ $('#btn').unbind('click',click1) // ----------------------------------------------------------- /* bind()与undind()中的data参数---用法并不唯一 * data参数的值->利用event事件对象的data属性进行接收 * 特点：改参数的数据内容只能在时间的处理函数中被使用——低耦合 */ // var obj = {a:'张无忌'}; $('#btn').bind('click',{a:'张无忌'},function (event) { console.log(event.data); // console.log(obj); }); </script> </html>
（2）多事件绑定
多事件绑定同样适用bind()方法完成事件绑定功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多事件的绑定与解绑</title> <script src="../jquery-1.12.4.js"></script> <style> #title{ width: 80px; height: 20px; border: 1px solid black; } ul{ list-style: none; padding: 0; display: none; } li{ width: 80px; height: 20px; border: 1px solid black; } </style> </head> <body> <div id="title">菜单</div> <ul> <li>北京</li> <li>天津</li> <li>南京</li> </ul> </body> <script> /*鼠标悬停事件 * mouseover - 表示鼠标悬停在指定元素上 * mouseout - 表示鼠标从指定元素上移开 */ /*写法一： $('#title').bind('mouseover',function () { $('ul').css('display','block'); }); $('#title').bind('mouseout',function () { $('ul').css('display', 'none'); }); */ // 写法二---链式操作： /* $('#title').bind('mouseover',function () { $('ul').css('display','block'); }).bind('mouseout',function () { $('ul').css('display', 'none'); });*/ //写法三：多事件绑定 $('#title').bind('mouseover mouseout',function () { if ($('ul').is(':hidden')){ $('ul').css('display','block'); }else { $('ul').css('display', 'none'); } }); </script> </html>
上述示例代码效果图如下所示：
（3）事件绑定方法的对比
3、事件切换
jQuery提供了hover()方法模拟鼠标悬停事件效果。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件切换</title> <script src="../jquery-1.12.4.js"></script> <style> #title{ width: 80px; height: 20px; border: 1px solid black; } ul{ list-style: none; padding: 0; display: none; } li{ width: 80px; height: 20px; border: 1px solid black; } </style> </head> <body> <div id="title">菜单</div> <ul> <li>北京</li> <li>天津</li> <li>南京</li> </ul> </body> <script> // jQuery提供了hover(over,out)方法 $('#title').hover(function () { $('ul').css('display','block'); },function () { $('ul').css('display', 'none'); }); </script> </html>
4、事件模拟
jQuery提供了trigger()方法用于模拟触发器匹配元素绑定的事件。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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 button'); }); // 模拟用户触发事件 $('#btn').trigger('click'); </script> </html>
